强大的表单验证插件 jquery validate

jquery validate是最流行的表单验证插件之一，jquery ui成员编写，至今都有维护更新

作用：丰富的表单验证，什么邮件，链接，还可以自定义各种规则，提示等，基本上能满足所有的表单验证；

下载地址：http://static.runoob.com/download/jquery-validation-1.14.0.zip

使用介绍：

导入库：

<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

简单使用：

var myform=$("#myform").validate({
        debug:true,//debug模式 提交只会检查不会提交 调试的时候用
        rules:{//规则
            username:{//name为username的input验证规则
                required:true,//是否必填
                minlength:2,//最小长度
                maxlength:10,
            },
            password:{
                required:true,
                minlength:2,
                maxlength:16,
            }
        },
        messages:{//定义提示信息
            username:{
                required:"必须填写用户名",//required条件触发时提示信息
                minlength:"用户名至少两位",
                maxlength:"用户名最多十位",
            },
            password:{
                required:"必须填写密码",
                minlength:"密码至少两位",
                maxlength:"密码最多十六位",
            }
        },
}}

html：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background-image: url(background.jpg);
background-repeat: no-repeat;
background-size: 100%
}
.myform{
width: 270px;
position: absolute;
left: 500px;
top: 200px;
opacity: 0.6;
}
.myform div input{
width: 180px; 
display: block;
float: left;
margin-top: 20px;
line-height: 25px;
height: 25px;


}
.myform span{
display:block;
float: left;
margin-top: 20px;
line-height: 25px;
height: 25px;
width: 80px;
font-size: 14pt;
font-weight:bold;
color: white;

}
.btn{
width: 80px;
height: 30px;
margin: 20px 30px 0 20px
}
</style>

</head>
<body>
<form class="myform" id="myform">
<div>
<span>用户名：</span>
<input type="text" name="username" id="username" />
</div>
<div>
<span>密 码：</span>
<input type="password" name="password" id="password" />
</div>
<input type="submit" value="登录" class="btn">
<input type="button" value="注册" class="btn">
</form>

</body>
</html>

required:ture~~~必填项
email：true~~~~必须是正确格式的电邮
url：true~~~~~~必须是正确格式的网址
data：true~~~~~必须是正确格式的日期
number：true~~~必须是合法数字
digits:true~~~~~~必须是整数
creditcard：true~~必须是合法信用卡号
equalTo：“password”必须和name为password的值相同，用于验证两次密码一致
accept:true~~~~~ 必须有合法文件后缀名
max：100~~~~~最大值100
min：1~~~~~~~最小值1
minlength：2~~~字符串最小长度2
maxlength：10~~字符串最大长度10

常用方法：

1.用其他事件取代submit默认事件：

$("myform").validate{(
    submitHandler:function(form){
        console.log("submit");
        form.submit();//默认的submit事件 ；
    }
)}

2.debug 调试的时候使用，只检查表单，不提交

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

3.ignore：忽略某些元素不验证

ignore：".ignore"//类名为ignore的元素不验证

4.自定义错误信息样式（css–加在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;
}

5.每个字段验证通过调用的函数（比如输入框验证后可以在后面加个勾）



success: function(label) {
 // set &nbsp; as text for IE
 label.html("&nbsp;").addClass("checked");
 //label.addClass("valid").text("Ok!")
}

6.验证的触发方式修改(都是boolean类型）除了focusCleanup默认为false其他都默认true；

onsubmit    提交时验证。设置为 false 就用其他方法去验证。  
onfocusout  失去焦点时验证（不包括复选框/单选按钮）。   
onkeyup     在 keyup 时验证。    
onclick     在点击复选框和单选按钮时验证。     
focusInvalid    提交表单后，未通过验证的表单会获得焦点。    
focusCleanup    如果是 true 那么当未通过验证的元素获得焦点时,移除错误提示。避免和 focusInvalid 一起用。

秒客网

强大的表单验证插件 jquery validate

使用介绍：

相关文章