jquery.validate表单验证

表单验证：

<div class="register-step-one">

<form id="register-cnt">

<div class="title">

免费注册用户

</div>

<ul>

<li>

<div class="register-name">

<label class="dt"> 手&nbsp;&nbsp;机&nbsp;&nbsp;号:</label>

<input type="text" name="registername" id="registername" value="" placeholder="请输入手机号码">

</div>

</li>

<li>

<label class="dt"> 效&nbsp;&nbsp;验&nbsp;&nbsp;码:</label>

<input type="text" name="" class="validate-box" id="" value="">

<div class="validate">

<img src="../images/register-img_03.jpg" />

</div>

</li>

<li>

<label class="dt">短信验证码:</label>

<input type="text" name="register-verification" class="text1" id="content" value="" placeholder="输入短信验证码">

<input id="btnSendCode" class="btnSendCode" type="button" value="获取验证码" onClick="sendMessage()" />

</li>

<li>

<label class="dt">设 置 密 码:</label>

<input type="password" name="pw1" id="pw1" value="" placeholder="6-20字母或数字组成">

</li>

<li>

<label class="dt">确 认 密 码:</label>

<input type="password" name="pw2" id="pw2" value="" placeholder="请再次输入密码">

</li>

</ul>

<div class=" agreement">

<a class="agreement-text" onclick="popupModalDialog(di1)">我已要阅读并同意<span><<爱惠农用户注册协议>></span></a>

<input  checked="true" type="checkbox" name=" agreement" id=" agreement" value="" placeholder="" style="float: left;">

 

</div>

<button class="next-step">

<!--<span><a id="submit">注册</a></span>-->

<input type="submit" id="submit" value="注册" class="submit"/>

</button>

</form>

</div>

 <script src="../js/jquer.validate.min.js" type="text/javascript" charset="utf-8"></script>

<script>

//表单验证

 

$.validator.setDefaults({

    submitHandler: function() {

//    alert("提交事件!");

    }

});

// 手机号码验证

jQuery.validator.addMethod("isMobile", function(value, element) {

    var length = value.length;

    var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;

    return this.optional(element) || (length == 11 && mobile.test(value));

}, "请正确填写您的手机号码");

$().ready(function() {

// 在键盘按下并释放及提交后验证提交表单

  $("#register-cnt").validate({

   rules: {

     registername: {

       required: true,

       minlength: 11,

       isMobile : true,

     },

     pw1: {

       required: true,

       minlength: 6,

     },

     pw2: {

       required: true,

       minlength: 6,

       equalTo: "#pw1"

     },     

   },

   messages: {      

     registername: {

       required: "请输入用户名",

       minlength: "用户名必需由11位数字组成",

       isMobile : "请正确填写您的手机号码"

     },

     pw1: {

       required: "请输入密码",

       minlength: "密码长度不能小于 5 个字母"

     },

     pw2: {

       required: "请输入密码",

       minlength: "密码长度不能小于 5 个字母",

       equalTo: "两次密码输入不一致"

     },     

   }

});

});

</script>

 

 

 

validate 验证用户名是否存在:

<form name="form1" id="form1" method="post">

<dl>

<dt>用户名：</dt>

<dd>

<input name="txtUserName" id="txtUserName" type="text" />

</dd>

</dl>

</form>

$(function() {

//表单验证JS

$("#form1").validate({

//出错时添加的标签

errorElement: "span",

rules: {

txtUserName: {

required: true,

minlength: 3,

maxlength: 16,

remote: {

type: "post",

url: "/tools/ValidateUserName.ashx",

data: {

username: function() {

return $("#txtUserName").val();

}

},

dataType: "html",

dataFilter: function(data, type) {

if (data == "true")

return true;

else

return false;

}

}

}

},

success: function(label) {

//正确时的样式

label.text(" ").addClass("success");

},

messages: {

txtUserName: {

required: "请输入用户名，3-16个字符（字母、数字、下划线），注册后不能更改",

minlength: "用户名长度不能小于3个字符",

maxlength: "用户名长度不能大于16个字符",

remote: "用户名不可用"

}

}

});

});

应注意的地方：

data: {

username: function() {

return $("#txtUserName").val();

}

有返回值，如果直接写“data: {username: $("#txtUserName").val();}”，这样是获取不到值的。