                        課程
                    
                        /前端開發(fā)
                        
                            /jQuery
                        
                        /jQuery基礎(chǔ)(五)一Ajax應(yīng)用與常用插件

提交以后右邊結(jié)果欄顯示跳轉(zhuǎn)到當(dāng)前頁面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

? ? <head>

? ? ? ? <title>表單驗(yàn)證插件</title>

? ? ? ? <link href="style.css" rel="stylesheet" type="text/css" />

? ? ? ? <script type="text/javascript" src="http://idcbgp.cn/data/jquery-1.8.2.min.js"></script>

? ? ? ? <script type="text/javascript" src="http://idcbgp.cn/data/jquery.validate.js"></script>

? ? ? ? <script type="text/javascript" src="http://idcbgp.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">表單驗(yàn)證插件</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(

? ? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? ? /*自定義驗(yàn)證規(guī)則*/

? ? ? ? ? ? ? ? ? ? ? rules: {

? ? ? ? ? ? ? ? ? ? ? ? ? ? email:{

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? required:true,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? email:true

? ? ? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? ? /*錯誤提示位置*/

? ? ? ? ? ? ? ? ? ? ? errorPlacement: function (error, element) {

? ? ? ? ? ? ? ? ? ? ? ? ? error.appendTo(".tip");

? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? );

? ? ? ? ? ? });

? ? ? ? </script>

? ? </body>

</html>

一只肥鶴

2018-05-28

源自：jQuery基礎(chǔ)(五)一Ajax應(yīng)用與常用插件 2-1

關(guān)注問題我要回答

1451

操作

收起

2 回答

十指狂魔
2019-04-09

HTML部分，將頭部的js引用改為下面這樣：

<script?type="text/javascript"?src="http://"></script>
<script?type="text/javascript"?src="http://"></script>
<script?type="text/javascript"?src="http://">
</script>

js部分改為下面這樣：

<script?type="text/javascript">
????????????$(function?()?{
????????????????$("#frmV").validate(
??????????????????{
??????????????????????/*自定義驗(yàn)證規(guī)則*/
??????????????????????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("郵箱驗(yàn)證成功！")
????????????????????????//?$(form).submit();
??????????????????????}
??????????????????}
????????????????);
????????????});
????????</script>

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

十指狂魔

html部分應(yīng)該是這樣的： <script type="text/javascript" src="//idcbgp.cn/data/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="//idcbgp.cn/data/jquery.validate.js"></script> <script type="text/javascript" src="//idcbgp.cn/data/jquery.validate.messages_cn.js"></script>