使用jQuery Validate实现表单验证

首先我们下载jquery 和validate 架包，然后开发。

 

demo.css 文件

@charset:"utf-8";
* {
    margin: 0;
    padding: 0;
}
/*å¼•å…¥å­—ä½“å›¾æ ‡*/
@font-face {font-family: "iconfont";
  src: url('iconfont.eot'); /* IE9*/
  src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff') format('woff'), /* chrome, firefox */
  url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
/*表å•æ ·å¼è®¾ç½®*/
#demo {
    display: block;
    width: 600px;
    min-height: 300px;
    background: #fff;
    box-shadow: 0 4px 20px 0 #ddd;
    margin: 0 auto;
    margin-top: 30px;
    padding: 20px;
    font-size: 16px;
    font-family: '微软雅黑';
    line-height: 50px;
}
p .tip {
    display: inline-block;
    width: 100px;
    margin-right: 15px;
    text-align: right;
    float: left;
}
input[type="text"],input[type="password"] {
    outline: none;
    width: 200px;
    height: 32px;
    line-height: 32px;
    border: 1px solid #eee;
    background: #fff;
    border-radius: 3px;
    text-indent: 15px;
    font-size: 16px;
    font-family: '微软雅黑 ';
}
input[type="radio"],input[type="checkbox"]{
    display: inline-block;
    outline: none;
    width: 16px;
    height: 16px;
    float: left;
    margin-top: 17px;
    margin-right: 3px;
    cursor: pointer;
}
.radioSpan,.checkboxSpan {
    float: left;
    display: inline-block;
    width: 50px;
}
button {
    display: inline-block;
    border: none;
    outline: none;
    width: 200px;
    height: 40px;
    border-radius: 5px;
    background: #73d66e;
    border: 1px solid #96d293;
    line-height: 40px;
    margin-left: 115px;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
}
/*设置默认的错误æç¤ºçš„æ ·å¼*/
.prompot {
    margin-left: 115px;
    max-width: 485px;
    clear: both;
}
.false {
    color: red;
}
.right {
    color: green;
}
input.false {
    border: 1px solid red;
}
input.right {
    border: 1px solid green;
}

 

test.js  文件

 

/*将默认提示中文化start*/
jQuery.extend(jQuery.validator.messages, {
    required   : "必选字段",
remote     : "请修正该字段",
email      : "请输入正确格式的电子邮件",
url        : "请输入合法的网址",
date       : "请输入合法的日期",
dateISO    : "请输入合法的日期 (ISO).",
number     : "请输入合法的数字",
digits     : "只能输入整数",
creditcard : "请输入合法的信用卡号",
equalTo    : "请再次输入相同的值",
accept     : "请输入拥有合法后缀名的字符串",
maxlength  : jQuery.validator.format("请输入一个长度最多是{0}的字符串"),
minlength  : jQuery.validator.format("请输入一个长度最少是{0}的字符串"),
rangelength: jQuery.validator.format("请输入一个长度介于{0}和{1}之间的字符串"),
range      : jQuery.validator.format("请输入一个介于{0}和{1}之间的值"),
max        : jQuery.validator.format("请输入一个最大为{0}的值"),
min        : jQuery.validator.format("请输入一个最小为{0}的值")
});
/*将默认提示中文化end*/




/*验证demo表单start*/
$(function(){
jQuery.validator.addMethod('tel',function(value,element){
var telmatch = /^1[0-9]{10}$/;
return this.optional(element) || (telmatch.test(value));
},'请输入正确的手机号码');


$('#demo').validate({
errorElement: 'span',
errorClass: 'false',
validClass: 'right',
onfocusout: function(element){
       $(element).valid();
   },
errorPlacement: function(error,element){
element.parent().next().append(error);
},
highlight: function(element, errorClass, validClass) {
$(element).removeClass('right').addClass('false');
$(element).parent().next().removeClass('right').addClass('false').find('i').html('');
        },
        success: function(span){
span.parent().removeClass('false').addClass('right');
span.prev('.iconfont').html('');
},
rules: {
username: {
required: true
},
password: {
required: true,
minlength: 6,
maxlength: 16
},
password2: {
required: true,
equalTo: '#password',
minlength: 6,
maxlength: 16
},
tel: {
required: true,
minlength: 11,
maxlength: 11,
digits: true
}

},
messages: {
username: {
required: '请设置一个用户名'
},
password: {
required: '请设置一个密码',
minlength: '密码长度不小于8个字符',
maxlength: '密码长度不大于16个字符'
},
password2: {
required: '请再次确认密码',
equalTo: '两次输入密码不相同',
minlength: '密码长度不小于8个字符',
maxlength: '密码长度不大于16个字符'
},
tel: {
required: '请输入您的常用手机号码',
minlength: '手机号码长度为11位',
maxlength: '手机号码长度为11位',
digits: '手机号码只能输入数字'
}

}
});
})

 

 

test.html  文件

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册表单验证使用jQuery Validate</title>
<link rel="stylesheet" href="css/demo.css" />
<script type="text/javascript" src="js/jquery-1.7.2.js" ></script>
<script type="text/javascript" src="js/validate-1.14.0.min.js" ></script>
<script type="text/javascript" src="js/test.js" ></script>
</head>
<body>
<form id="demo" autocomplete="off">
    <p>
        <span class="tip">用户名：</span>
        <input type="text" name="username">
    </p>
    <p class="prompot"><i class="iconfont"></i></p>
    <p>
        <span class="tip">密码：</span>
        <input type="password" name="password" id="password">
    </p>
    <p class="prompot"><i class="iconfont"></i></p>
    <p>
        <span class="tip">确认密码：</span>
        <input type="password" name="password2">
    </p>
    <p class="prompot"><i class="iconfont"></i></p>
    <p>
        <span class="tip">手机号码：</span>
        <input type="text" name="tel" class="tel">
    </p>
    <p class="prompot"><i class="iconfont"></i></p>
  
    <button>确认</button>
</form>
</body>
</html>