bob体育官方平台
jQuery验证插件validate使用详解_jquery_脚本之家

一、jQuery.validate简介

一、导入JS文件 

jQuery.validate.js插件用于对表单输入进行验证,其接受布置特轻松。协理多事件触发,自带三种表达规则,还扶助自定义表明法规。

在乎Validate的导入要在jQuery库之后。代码如下:

1、配置格局

起首入jQuery库,然后导入Validate插件,假设是华语提示还索要导入messages_zh.js。

初叶入jQuery库,然后导入Validate插件,假若是汉语提示还亟需导入messages_zh.js。

<script src="jQuery.1.8.3.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="messages_zh.js" type="text/javascript"></script>

潜心Validate的导入要在jQuery库之后。代码如下:

 

接下来假诺定义表明准则和点名错误提示地方就足以了。

二、暗中同意校检准绳

$里步向验证准绳与谬误提醒地点,代码如下:

(1)、required:true               必输字段
(2)、remote:"remote-valid.jsp"   使用ajax方法调用remote-valid.jsp验证输入值
(3)、email:true                  必须输入正确格式的电子邮件
(4)、url:true                    必须输入正确格式的网址
(5)、date:true                   必须输入正确格式的日期,日期校验ie6出错,慎用
(6)、dateISO:true                必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(7)、number:true                 必须输入合法的数字(负数,小数)
(8)、digits:true                 必须输入整数
(9)、creditcard:true             必须输入合法的信用卡号
(10)、equalTo:"#password"        输入值必须和#password相同
(11)、accept:                    输入拥有合法后缀名的字符串(上传文件的后缀)
(12)、maxlength:5                输入长度最多是5的字符串(汉字算一个字符)
(13)、minlength:10               输入长度最小是10的字符串(汉字算一个字符)
(14)、rangelength:[5,10]         输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)、range:[5,10]               输入值必须介于 5 和 10 之间
(16)、max:5                      输入值不能大于5
(17)、min:10                     输入值不能小于10
  $ { $.validate({ /*&#33258;&#23450;&#20041;&#39564;&#35777;&#35268;&#21017;*/ rules:{ username:{ required:true,minlength:6 }, userpass:{ required:true,minlength:10 } }, /*&#38169;&#35823;&#25552;&#31034;&#20301;&#32622;*/ errorPlacement:function{ error.appendTo(element.siblings 

三、私下认可的唤起

这么就到位了极度轻便的表单验证功效,当表单填写不科学时Validate在的弟兄成分里突显错误提醒。

messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
number: "Please enter a valid number.",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")
},

2、name属性

jQuery Validate提供了汉语音讯提示包,位于下载包的 dist/localization/messages_zh.js,只需将包引进到页面就可以。
当然也能够祥和安装messages来设置提示。

证实:jQuery.validate.js插件与的涉及应用的是表单的name属性。独有存在name属性的工夫证实!

 

二、自定义错误提醒地点

四、使用办法
1、通过质量情势丰裕验证法规

当大家想设置错误提醒的呈现地方怎么设置呢?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在控件中设置验证规则</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>
<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
$().ready(function() {
    $("#commentForm").validate();
});
</script>
<style>
.error{
    color:red;
}
</style>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>输入您的名字,邮箱,URL,备注。</legend>
    <p>
      <label for="cname">Name (必需, 最小两个字母)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (必需)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (可选)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">备注 (必需)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
</body>
</html>

答案正是在errorPlacement参数里,你能够遵循自身的内需自定义书写,用的是jQuery

 

 /*错误提示位置*/ errorPlacement:function{ //第一个参数是错误的提示文字,第二个参数是当前输入框 error.appendTo(element.siblings; //用的是jQuery,这里设置的是,错误提示文本显示在当前文本框的兄弟span中 }

2、metadata用法,将官和校官验法则写到控件中

三、自定义错误提醒消息

也得以在class属性填写法则,效果是意气风发致的。

举例当大家有多少个require:true选项,我想依附分歧的选项设置不一致的提醒如何是好吧?

行使class="{}"的办法,必须引进包:jquery.metadata.js;
能够利用如下的章程,校订提示内容:class="{required:true,minlength:5,messages:{required:'请输入内容'}}";
在选取equalTo关键字时,后边的内容必得抬高引号,如下代码:class="{required:true,minlength:5,equalTo:'#password'}"。

答案就是在messages参数里。用稀少嵌套的措施设置本身索要的提醒新闻。即使有个别字段未有message消息,这时候才调用暗中认可的提示音信。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <base href="<%=basePath%>">

        <title>jQuery Validate验证框架详解-metadata用法</title>

        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.validate.min.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.metadata.min.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/validate/messages_zh.js"></script>
        <script type="text/javascript">
        $(function(){
            $("#myform").validate();
        });
        </script>
    </head>

    <body>
        <form id="myform" method="post" action="">
            <p>
                <label for="myname">用户名:</label>
                <!-- id和name最好同时写上 -->
                <input id="myname" name="myname" class="required" />
            </p>
            <p>
                <label for="email">E-Mail:</label>
                <input id="email" name="email" class="required email" />
            </p>
            <p>
                <label for="password">登陆密码:</label>
                <input id="password" name="password" type="password"
                    class="{required:true,minlength:5}" />
            </p>
            <p>
                <label for="confirm_password">确认密码:</label>
                <input id="confirm_password" name="confirm_password" type="password"
                    class="{required:true,minlength:5,equalTo:'#password'}" />
            </p>
            <p>
                <label for="confirm_password">性别:</label>
                <!-- 表示必须选中一个 -->
                <input  type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
                <input  type="radio" id="gender_female" value="f" name="gender"/>
            </p>
            <p>
                <label for="confirm_password">爱好:</label>
                <!-- checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间  -->
                <input type="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />
                <input type="checkbox" id="spam_phone" value="phone" name="spam[]" />
                <input type="checkbox" id="spam_mail" value="mail" name="spam[]" />
            </p>
            <p>
                <label for="confirm_password">城市:</label>
                <select id="jungle" name="jungle" title="Please select something!" class="{required:true}">
                    <option value=""></option>
                    <option value="1">厦门</option>
                    <option value="2">泉州</option>
                <option value="3">Oi</option>
            </select>
            </p>
            <p>
                <input class="submit" type="submit" value="立即注册" />
            </p>
        </form>
    </body>
</html>
 messages: { UserName: { required: "请输入用户名!" //注意,同样是必填项,但是优先显示在messages里的提示信息 }, Email:{ required:"请输入邮箱地址!" //不会统一输出 必填字段 了哦 } }

 

实际上,jQuery.Validate默许的荒唐提醒是生成四个class=error的label,所以,要是想设置样式,最简便易行的主意正是针对性这一个label设置就OK了,当然私下认可的label是能够手动修改的。

3、将校验法则写到js代码中

四、ajax异步验证 只须要用到remote就能够,注意后台重回的JSON只可以够是true或false。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在JS中设置规则</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>
<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
  $("#signupForm").validate({
      rules: {
        firstname: "required",
        lastname: "required",
        username: {
          required: true,
          minlength: 2
        },
        password: {
          required: true,
          minlength: 5
        },
        confirm_password: {
          required: true,
          minlength: 5,
          equalTo: "#password"
        },
        email: {
          required: true,
          email: true
        },
        "topic[]": {
          required: "#newsletter:checked",
          minlength: 2
        },
        agree: "required"
      },
      messages: {
        firstname: "请输入您的名字",
        lastname: "请输入您的姓氏",
        username: {
          required: "请输入用户名",
          minlength: "用户名必需由两个字母组成"
        },
        password: {
          required: "请输入密码",
          minlength: "密码长度不能小于 5 个字母"
        },
        confirm_password: {
          required: "请输入密码",
          minlength: "密码长度不能小于 5 个字母",
          equalTo: "两次密码输入不一致"
        },
        email: "请输入一个正确的邮箱",
        agree: "请接受我们的声明",
        topic: "请选择两个主题"
      }
  });
});
</script>
<style>
.error{
  color:red;
}
</style>
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
  <fieldset>
    <legend>验证完整的表单</legend>
    <p>
      <label for="firstname">名字</label>
      <input id="firstname" name="firstname" type="text">
    </p>
    <p>
      <label for="lastname">姓氏</label>
      <input id="lastname" name="lastname" type="text">
    </p>
    <p>
      <label for="username">用户名</label>
      <input id="username" name="username" type="text">
    </p>
    <p>
      <label for="password">密码</label>
      <input id="password" name="password" type="password">
    </p>
    <p>
      <label for="confirm_password">验证密码</label>
      <input id="confirm_password" name="confirm_password" type="password">
    </p>
    <p>
      <label for="email">Email</label>
      <input id="email" name="email" type="email">
    </p>
    <p>
      <label for="agree">请同意我们的声明</label>
      <input type="checkbox" class="checkbox" id="agree" name="agree">
    </p>
    <p>
      <label for="newsletter">我乐意接收新信息</label>
      <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
    </p>
    <fieldset id="newsletter_topics">
      <legend>主题 (至少选择两个) - 注意:如果没有勾选“我乐意接收新信息”以下选项会隐藏,但我们这里作为演示让它可见</legend>
      <label for="topic_marketflash">
        <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic[]">Marketflash
      </label>
      <label for="topic_fuzz">
        <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic[]">Latest fuzz
      </label>
      <label for="topic_digester">
        <input type="checkbox" id="topic_digester" value="digester" name="topic[]">Mailing list digester
      </label>
      <label for="topic" class="error" style="display:none">至少选择两个</label>
    </fieldset>
    <p>
      <input class="submit" type="submit" value="提交">
    </p>
  </fieldset>
</form>
</body>
</html>

以下给出一个总结示范,前台HTML代码

 

 表单验证插件      $ { $.validate({ rules: { UserName: { required: true, minlength: 3, maxlength: 18, remote: "/Home/CheckUserName" }, Email: { required: true,email:true }, UserPassword: { required: true ,minlength: 6 }, Mobile: { required: true, number:true }, IdCard: { required: true,isIdCardNo: true }, Age: { required: true ,number:true,min:1,max:100 } }, messages:{ UserName: { required: "&#35831;&#36755;&#20837;&#29992;&#25143;&#21517;&#65281;", minlength: "&#29992;&#25143;&#21517;&#38271;&#24230;&#26368;&#23569;&#38656;&#35201;3&#20301;&#65281;", maxlength: "&#29992;&#25143;&#21517;&#38271;&#24230;&#26368;&#22823;&#19981;&#33021;&#36229;&#36807;18&#20301;&#65281;", remote: "&#27492;&#29992;&#25143;&#21517;&#24050;&#23384;&#22312;&#65281;" }, Email: { required: "&#35831;&#22635;&#20889;&#37038;&#31665;", email: "&#35831;&#36755;&#20837;&#27491;&#30830;&#30340;&#37038;&#31665;&#26684;&#24335;" }, UserPassword: { required: "&#35831;&#22635;&#20889;&#20320;&#30340;&#23494;&#30721;!", minlength: "&#23494;&#30721;&#38271;&#24230;&#19981;&#33021;&#23567;&#20110;6&#20301;" }, Mobile: { required: "&#35831;&#22635;&#20889;&#20320;&#30340;&#25163;&#26426;&#21495;&#30721;", number:"&#25163;&#26426;&#21495;&#30721;&#21482;&#33021;&#20026;&#25968;&#23383;" }, IdCard: { required: "&#35831;&#36755;&#20837;&#36523;&#20221;&#35777;&#21495;&#30721;&#65281;", isIdCardNo:"&#35831;&#36755;&#20837;&#27491;&#30830;&#30340;&#36523;&#20221;&#35777;&#21495;&#30721;&#65281;" }, Age: { required: "&#35831;&#36755;&#20837;&#24180;&#40836;!", number: "&#35831;&#36755;&#20837;&#25968;&#23383;", min: "&#24180;&#40836;&#19981;&#33021;&#23567;&#20110;1", max: "&#24180;&#40836;&#19981;&#33021;&#22823;&#20110;100" } }, /*&#38169;&#35823;&#25552;&#31034;&#20301;&#32622;*/ errorPlacement: function  { error.appendTo; } }) })  

 public class HomeController : Controller { public ActionResult Index; } [HttpGet] public ActionResult CheckUserName() { string username = HttpContext.Request.QueryString["username"]; bool succeed = true; if  { succeed = false; } return Json(succeed, JsonRequestBehavior.AllowGet); } }

 

如上正是本文的全部内容,希望对大家的学习抱有助于。

五、常用方法及注意难题

1、用别样方法替代暗中同意的submit

$(function(){
   $("#signupForm").validate({
        submitHandler:function(form){
            alert("submit!");   
            form.submit();
        }    
    });
});

 

2、能够安装validate的私下认可值,写法如下:

$.validator.setDefaults({
    submitHandler: function(form) { alert("submit!"); form.submit(); }
});

假使想付出表单,必要选择form.submit(卡塔尔(قطر‎,而毫不接收$(form卡塔尔(英语:State of Qatar).submit(卡塔尔(قطر‎

 

2、debug,只验证不提交表单

倘诺那个参数为true,那么表单不会付给,只举办检讨,调节和测量试验时丰盛利于。

$(function(){
    $("#signupForm").validate({
        debug:true
    });
});

豆蔻梢头旦多少个页面中有多少个表单都想设置成为debug,用

$.validator.setDefaults({
    debug: true
})

 

3、ignore:忽视某个因素不表明

ignore: ".ignore"

 

4、修改错误新闻展现的岗位 errorPlacement:Callback

上一篇:没有了 下一篇:没有了
返回顶部