表单验证：
<div class="register-step-one">
<form id="register-cnt">
<div class="title">
免费注册用户
</div>
<ul>
<li>
<div class="register-name">
<label class="dt"> 手 机 号:</label>
<input type="text" name="registername" id="registername" value="" placeholder="请输入手机号码">
</div>
</li>
<li>
<label class="dt"> 效 验 码:</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();}”，这样是获取不到值的。