使用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.message
4000
s, {

    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>