提交以后右邊結果欄顯示跳轉到當前頁面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
? ? <head>
? ? ? ? <title>表單驗證插件</title>
? ? ? ? <link href="style.css" rel="stylesheet" type="text/css" />
? ? ? ? <script type="text/javascript" src="http://www.xianlaiwan.cn/data/jquery-1.8.2.min.js"></script>
? ? ? ? <script type="text/javascript" src="http://www.xianlaiwan.cn/data/jquery.validate.js"></script>
? ? ? ? <script type="text/javascript" src="http://www.xianlaiwan.cn/data/jquery.validate.messages_cn.js"></script>
? ? </head>
? ? <body>
? ? ? ? <form id="frmV" method="get" action="#">
? ? ? ? ? ? <div id="divtest">
? ? ? ? ? ? ? ? <div class="title">
? ? ? ? ? ? ? ? ? ? <span class="fl">表單驗證插件</span>?
? ? ? ? ? ? ? ? ? ? <span class="fr">
? ? ? ? ? ? ? ? ? ? ? ? <input id="btnSubmit" type="submit" value="提交" />
? ? ? ? ? ? ? ? ? ? </span>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div class="content">
? ? ? ? ? ? ? ? ? ? <span class="fl">郵箱：</span><br />
? ? ? ? ? ? ? ? ? ? <input id="email" name="email" type="text" /><br />
? ? ? ? ? ? ? ? ? ? <span class="tip"></span>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </form>
? ? ? ??
? ? ? ? <script type="text/javascript">
? ? ? ? ? ? $(function () {
? ? ? ? ? ? ? ? $("#frmV").validate(
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? /*自定義驗證規則*/
? ? ? ? ? ? ? ? ? ? ? rules: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? email:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? required:true,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? email:true
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? /*錯誤提示位置*/
? ? ? ? ? ? ? ? ? ? ? errorPlacement: function (error, element) {
? ? ? ? ? ? ? ? ? ? ? ? ? error.appendTo(".tip");
? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? );
? ? ? ? ? ? });
? ? ? ? </script>
? ? </body>
</html>
2019-04-09
HTML部分，將頭部的js引用改為下面這樣：
js部分改為下面這樣：
<script?type="text/javascript"> ????????????$(function?()?{ ????????????????$("#frmV").validate( ??????????????????{ ??????????????????????/*自定義驗證規則*/ ??????????????????????rules:?{ ????????????????????????????email:{ ????????????????????????????????required:?true, ????????????????????????????????email:?true ????????????????????????????} ??????????????????????}, ??????????????????????/*錯誤提示位置*/ ??????????????????????errorPlacement:?function?(error,?element)?{ ??????????????????????????error.appendTo(".tip"); ??????????????????????}, ??????????????????????submitHandler:?function(form)?{ ????????????????????????//?some?other?code ????????????????????????//?maybe?disabling?submit?button ????????????????????????//?then: ????????????????????????alert("郵箱驗證成功！") ????????????????????????//?$(form).submit(); ??????????????????????} ??????????????????} ????????????????); ????????????}); ????????</script>2018-06-11
<script type="text/javascript" src="http://www.xianlaiwan.cn/data/jquery-1.8.2.min.js"></script>
? ? ? ? <script type="text/javascript" src="http://www.xianlaiwan.cn/data/jquery.validate.js"></script>
? ? ? ? <script type="text/javascript" src="http://www.xianlaiwan.cn/data/jquery.validate.messages_cn.js"></script>
庫文件引用錯誤，JQ，JS不生效，記得在慕課網的鏈接地址中http://改成https://。?