form validation:
<div class="register-step-one">
<form id="register-cnt">
<div class="title">
Free registered users
</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">SMS verification code:</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">Set Password:</label>
<input type="password" name="pw1" id="pw1" value="" placeholder="6-20字母或数字组成">
</li>
<li>
<label class="dt">Confirm Password:</label>
<input type="password" name="pw2" id="pw2" value="" placeholder="Please enter password again">
</li>
</ul>
<div class=" agreement">
<a class="agreement-text" onclick="popupModalDialog(di1)">I have read and agree to <span><<Agreement User Registration Agreement>></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>
//form validation
$.validator.setDefaults({
submitHandler: function() {
// alert("Submit event!");
}
});
// phone number verification
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));
}, "Please fill in your mobile phone number correctly");
$().ready(function() {
// Validate the submit form after the keyboard is pressed and released and submitted
$("#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: "Please enter username",
minlength: "Username must consist of 11 digits",
isMobile : "Please fill in your mobile number correctly"
},
pw1: {
required: "Please enter password",
minlength: "Password length cannot be less than 5 letters"
},
pw2: {
required: "Please enter password",
minlength: "Password length cannot be less than 5 letters",
equalTo: "Two times of password input are inconsistent"
},
}
});
});
</script>
validate validates that the username exists:
<form name="form1" id="form1" method="post">
<dl>
<dt>Username:</dt>
<dd>
<input name="txtUserName" id="txtUserName" type="text" />
</dd>
</dl>
</form>
$(function() {
//form validation JS
$("#form1").validate({
// label to add on error
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) {
// correct style
label.text(" ").addClass("success");
},
messages: {
txtUserName: {
required: "Please enter a username, 3-16 characters (letters, numbers, underscores), which cannot be changed after registration",
minlength: "Username length cannot be less than 3 characters",
maxlength: "Username length cannot be greater than 16 characters",
remote: "Username not available"
}
}
});
});
Points to pay attention to:
data: {
username: function() {
return $("#txtUserName").val();
}
There is a return value. If you write "data: {username: $("#txtUserName").val();}" directly, you will not get the value.