There are two ways to use the front-end verification. One is to write the verification condition in the class attribute inside the tag, and the other is to write the verification in the js code.
The first method is written in the label, which can intuitively display the inspection of the form label. I think it is suitable for use when there are many labels.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tag method validation</title>
<!--Introduce js-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<!--Custom verification js includes mobile phone verification and ID verification-->
<script src="js/user_defined_validate.js"></script>
<!--Chinese prompt information js-->
<script src="js/message_cn.js"></script>
</head>
<body>
<form action="#" method="post" id="formT">
<label>Password:</label>
<input type="password" name="password" id="password" class="required" /><br />
<!--Required and Email Verification-->
<label>Email:</label>
<input type="text" name="email" id="email" class="required email" /><br />
<!--Mobile phone number verification-->
<label>Mobile:</label>
<input type="text" name="phone" id="phone" class="isPhone" /><br />
<label>First-tier cities:</label><br />
<input type="checkbox"
id="shenzhen" name="citys" value="shenzhen" class="required minlength:2" />
<input type="checkbox" id="shanghai" name="citys" value="上海" />
<input type="checkbox" id="hangzhou" name="citys" value="hz" />
<input type="checkbox" id="beijing" name="citys" value="peking" />
<br />
<input type="submit" value="提交" />
</form>
<script>
// Validate after page load
$().ready(function() {
$("#formT").validate({
//Set the form to not submit after clicking the volume submit
debug:true
});
});
</script>
</body>
</html>
The second is written in js code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/user_defined_validate.js"></script>
<script>
$().ready(function(){
var validate = $("#formT").validate({
//The debug mode is true to cancel the default submit function of submit
debug: true,
//errorClass: "label.error", //The default style class for errors is: error
//When false, when validation is invalid, there is no focus response
focusInvalid: false,
onkeyup: false,
submitHandler: function(form) {
alert('Submit form!');
form.submit();
},
// check rules
rules: {
password: {
required: true,
rangelength: [4, 10]
},
email: {
required: true,
email: true
},
phone: {
required: true,
isPhone:true
}
,
sex:{
required:true
}
},
//The prompt information given by the corresponding rule
messages:{
password:{
required: 'required',
rangelength:$.validator.format("Minimum length of password: {4}, Maximum length {10}")
},
email:{
required:"required",
email:"Please enter the correct email format!"
},
phone:{
required:"required",
isPhone:"Please enter the correct phone number!"
}
,
sex:{
required:"required"
}
}
});
});
</script>
<title></title>
</head>
<body>
<form action="#" method="post" id="formT">
<label>密码：</label><input type="password" name="password" id="password" />
<br />
<label>邮箱：</label><input type="text" name="email" id="email" /><br />
<label>手机：</label><input type="text" name="phone" id="phone" /><br />
<label>性别:</label><br />
<label>男：</label>
<input type="checkbox" name="male" id="male" value="sex"/>
<label>女：</label>
<input type="checkbox" name="female" id="female" value=""/>
<br />
<input type="submit" value="提交" />
</form>
</body>
</html>
Description file: Default check rules:
(1)required:true Required field
(2) remote: "check.php" uses the ajax method to call check.php to verify the input value
(3)email:true must enter email in correct format
(4)url:true You must enter a URL in the correct format
(5) date: true must enter the date in the correct format
(6) dateISO: true must enter the date (ISO) in the correct format, for example: 2009-06-23, 1998/01/22
Validate only format, not validity
(7)number:true must enter a valid number (negative number, decimal)
(8) digits: true must enter an integer
(9)creditcard: A valid credit card number must be entered
(10) equalTo: "#field" The input value must be the same as #field
(11) accept: Enter a string with a legal suffix (the suffix of the uploaded file)
(12) maxlength: 5 Enter a string with a maximum length of 5 (Chinese characters are counted as one character)
(13) minlength: 10 Input a string with a minimum length of 10 (Chinese characters are counted as one character)
(14)rangelength:[5,10] Enter a string with a length between 5 and 10") (Chinese characters are counted as one character)
(15)range:[5,10] The input value must be between 5 and 10
(16)max:5 The input value cannot be greater than 5
(17)min:10 The input value cannot be less than 10
Default prompt:
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
dateDE: "Please enter a valid date.",
number: "Please enter a valid number.",
numberDE: "Please enter a number.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1}
characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")
}
Chinese default prompts to add js:
jQuery.extend(jQuery.validator.messages, {
required: "This content is required, please enter!",
remote: "Content input error!",
email: "E-mail format error, please re-enter!",
url: "The URL format is incorrect, please re-enter!",
date: "Incorrect date format, please re-enter!",
dateISO: "Incorrect date format, please re-enter!",
number: "Please enter a valid number!",
digits: "Please enter zero or a positive integer!",
creditcard: "The format of the credit card number is incorrect, please re-enter!",
equalTo: "The two entries are inconsistent, please re-enter!",
accept: "Please enter a string with a valid suffix!",
maxlength: jQuery.validator.format("The length of the string cannot be greater than {0}!"),
minlength: jQuery.validator.format("The length of the string cannot be less than {0}!"),
rangelength: jQuery.validator.format("The string length is only allowed between {0}-{1}!"),
range: jQuery.validator.format("The input value is only allowed between {0}-{1}!"),
max: jQuery.validator.format("The input value is not allowed to be greater than {0}!"),
min: jQuery.validator.format("The input value is not allowed to be less than {0}!"),
integer: "Please enter a valid integer!",
positive: "Please enter a valid positive number!",
positiveInteger: "Please enter a valid positive integer!",
mobile: "The format of the mobile phone number is incorrect, please re-enter!",
phone: "The format of the phone number is incorrect, please re-enter!",
zipCode: "The zip code format is incorrect, please re-enter!",
requiredTo: "This content is required, please enter!",
username: "Only Chinese, English, numbers and underscores are allowed!",
prefix: "Please enter a string starting with {0}!",
lettersonly: "Only letters are allowed!"
});
Custom validation js:
// Verify phone
jQuery.validator.addMethod("isPhone", function(value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "Please fill in the correct mobile phone number"); //You can customize the default prompt information
Example test: jqvalidationtest.zip