jQuery_validate表单验证

最新推荐文章于 2024-04-15 14:11:06 发布

Boogie_97

最新推荐文章于 2024-04-15 14:11:06 发布

阅读量967

点赞数 2

分类专栏： JS 文章标签： jquery

本文链接：https://blog.csdn.net/qq_38070608/article/details/79528680

版权

JS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

jQuery_validate是jQuery的一个插件。它通过一系列简单而又不失严谨的验证规则，使开发者更便捷的实现表单验证，来提高用户体验效果。

使用validate验证必须引入js包。既然是jQuery的插件，就必须在jQuery环境下。

默认校验规则

(1)required:true      必输字段 
(2)remote:"validate.jsp"   使用ajax方法调用validate.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:      必须输入合法的信用卡号 
 (10)equalTo:"#field"      输入值必须和#field相同 
 (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

默认的提示规则

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 ).",
    number: "Please enter a valid number.",
    digits: "Please enter only digits.",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    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}." )
}

jQuery Validate提供了中文提示包，位于下载包的 dist/localization/messages_zh.js，内容如下：
这里写图片描述

你可以将该本地化信息文件 dist/localization/messages_zh.js 引入到页面：

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

使用：必须使用表单的name属性值来判断校验规则

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQueryValidate验证</title>
</head>
<body>
<form id="myForm" action="sucessful.html">
    用户名：<input name="userName" type="text" placeholder="请输入用户名" title="请输入用户名"/><br/>
    密码：<input id="myPwd" name="password" type="password"/><br/>
    确认密码：<input name="repPwd" type="repwd"/><br/>
    邮箱：<input name="email" type="email"/><br/>
    手机号：<input name="phone" type="phone"/><br/>
    是否同意协议：<input name="context" type="checkbox"/><br/>
    <button type="submit">登录</button>
</form>
<script type="text/javascript" src="JS/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="JS/jquery.validate.js"></script>
<script>
$(function(){
    /*jQuery_validate表单验证*/
    $("#myForm").validate({
        rules:{
            userName:{
                required:true
            },
            password:{
                required:true,
                minlength:6,
                maxlangth:10
            },
            repPwd:{
               required:true,
                minlength:6,
                maxlength:10,
                equalTo:"#myPwd"
            },
            email:{
                required:true,
                email:true
            },
            phone:{
                required:true,
                checkPhone:true
            },
            context:{
                required:true
            }
        },
        messages:{
            userName:{
                required:"请输入用户名"
            },
            password:{
                required:"请输入密码",
                minlength:"密码长度不少于6位",
                maxlength:"密码长度不大于10位"
            },
            repPwd:{
                required:"请输入重复密码",
                minlength:"密码长度不要少于6位",
                maxlength:"密码长度不大于10位",
                equalTo:"两次密码必须一致"
            },
            email:{
                required:"请输入邮箱",
                email:"邮箱格式不正确",
            },
            phone:{
                required:"请输入手机号"
            },
            context:{
                required:"必须同意协议"
            }
        },//jQuery_validate验证结束
        //文本框失去焦点就立即验证
        onfocusout:function(e){
            $(e).valid();
        }
    });
    //增加手机验证规则：
    $.validator.addMethod("checkPhone",function(value,e){
        var phone=/^1[3|4|5|8][0-9]\d{4,8}$/;
        return this.optional(e)||(phone.test(value))
    },"手机号格式不正确")
});
</script>
</body>
</html>

重点看自定义验证规则：

addMethod(name,method,message)方法
参数 name 是添加的方法的名字。

参数 method 是一个函数，接收三个参数 (value,element,param) 。
value 是元素的值，element 是元素本身，param 是参数。

我们可以用 addMethod 来添加除内置的 Validation 方法之外的验证方法。比如有一个字段，只能输一个字母，范围是 a-f，写法如下：

$.validator.addMethod("af",function(value,element,params){  
    if(value.length>1){
        return false;
    }
    if(value>=params[0] && value<=params[1]){
        return true;
    }else{
        return false;
    }
},"必须是一个字母,且a-f");
如果有个表单字段的 name="username"，则在 rules 中写：

username:{
   af:["a","f"]
}
addMethod 的第一个参数，是添加的验证方法的名字，这时是 af。
addMethod 的第三个参数，是自定义的错误提示，这里的提示为:"必须是一个字母,且a-f"。
addMethod 的第二个参数，是一个函数，这个比较重要，决定了用这个验证方法时的写法。

如果只有一个参数，直接写，比如 af:"a"，那么 a 就是这个唯一的参数，如果多个参数，则写在 [] 里，用逗号分开。

validate还提供了许多灵活的校验方式和规则。

debug模式：只验证不提交，在调试阶段能很方便的运用。

`如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便。

$().ready(function() {
 $("#signupForm").validate({
        debug:true
    });
});
如果一个页面中有多个表单都想设置成为 debug，则使用：

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

ignore：忽略某些元素不验证

ignore: ".ignore"

更改错误信息显示的位置

errorPlacement：Callback
指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面。

errorPlacement: function(error, element) {  
    error.appendTo(element.parent());  
}

更改错误信息显示的样式

设置错误提示的样式，可以增加图标显示，在该系统中已经建立了一个 validation.css，专门用于维护校验文件的样式。

input.error { border: 1px solid red; }
label.error {
  background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;

  padding-left: 16px;

  padding-bottom: 2px;

  font-weight: bold;

  color: #EA5200;
}
label.checked {
  background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}

每个字段验证通过执行函数

success：String,Callback
要验证的元素通过验证后的动作，如果跟一个字符串，会当作一个 css 类，也可跟一个函数。

success: function(label) {
    // set &nbsp; as text for IE
    label.html("&nbsp;").addClass("checked");
    //label.addClass("valid").text("Ok!")
}
添加 "valid" 到验证元素，在 CSS 中定义的样式 <style>label.valid {}</style>。

success: "valid"

radio 和 checkbox、select 的验证

radio 的 required 表示必须选中一个。

<input  type="radio" id="gender_male" value="m" name="gender" required />
<input  type="radio" id="gender_female" value="f" name="gender"/>
checkbox 的 required 表示必须选中。

<input type="checkbox" class="checkbox" id="agree" name="agree" required />
checkbox 的 minlength 表示必须选中的最小个数，maxlength 表示最大的选中个数，rangelength:[2,3] 表示选中个数区间。

<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" required minlength="2" />
<input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
<input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />
select 的 required 表示选中的 value 不能为空。

<select id="jungle" name="jungle" title="Please select something!" required>
    <option value=""></option>
    <option value="1">Buga</option>
    <option value="2">Baga</option>
    <option value="3">Oi</option>
</select>
select 的 minlength 表示选中的最小个数（可多选的 select），maxlength 表示最大的选中个数，rangelength:[2,3] 表示选中个数区间。

<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
    <option value="b">Banana</option>
    <option value="a">Apple</option>
    <option value="p">Peach</option>
    <option value="t">Turtle</option>
</select>

Boogie_97

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery_validate表单验证

jQuery_validate是jQuery的一个插件。它通过一系列简单而又不失严谨的验证规则，使开发者更便捷的实现表单验证，来提高用户体验效果。使用validate验证必须引入js包。既然是jQuery的插件，就必须在jQuery环境下。默认校验规则(1)required:true 必输字段 (2)remote:"validate.jsp" 使用ajax方法调用validate.
复制链接

扫一扫