jQuery formValidator form validation
- 2020-11-20 06:01:33
- OfStack
As a programmer, it is necessary to make some summaries after solving problems encountered in work. It is not only convenient to summarize and review relevant knowledge points, but also provides some working experience for the majority of programmers and gives a peer review.
html parts:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>formValidator</title>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/formValidator-4.0.1.min.js"></script>
<script src="js/DateTimeMask.js"></script>
<script src="js/formValidatorRegex.js"></script>
<link rel="stylesheet" href="css/validator.css">
<style>
form{
width: 500px;
margin: 100px auto;
}
table tr td:first-child{
text-align: right;
}
table tr td{
padding: 5px 0;
}
div{
margin-left: 10px;
padding: 0 10px;
}
</style>
</head>
<body>
<form name="myfm" id="myfm" action="1.html">
<table>
<tbody>
<tr>
<td><label for="uname"> User name: </label></td>
<td><input type="text" id="uname" name="uname"/></td>
<td><div id="unameTip"></div></td>
</tr>
<tr>
<td><label for="pwd"> Password: </label></td>
<td><input type="password" id="pwd" name="pwd"/></td>
<td><div id="pwdTip"></div></td>
</tr>
<tr>
<td><label for="repwd"> Repeat password: </label></td>
<td><input type="password" name="repwd" id="repwd"/></td>
<td><div id="repwdTip"></div></td>
</tr>
<tr>
<td><label> Gender: </label></td>
<td>
<input type="radio" name="sex" value="male" id="male"/>
<label for="male"> male </label>
<input type="radio" name="sex" value="female" id="female"/>
<label for="female"> female </label>
</td>
</tr>
<tr>
<td><label for="area"> Area: </label></td>
<td>
<select name="area" id="area">
<option value="0">- Please select a -</option>
<option value="1"> Jinjiang district, </option>
<option value="2"> thesis </option>
<option value="3"> Longquanyi district </option>
<option value="4"> venture </option>
</select>
</td>
</tr>
<tr>
<td><label for="num"> Id: </label></td>
<td><input type="text" id="num" name="num"/></td>
<td><div id="numTip"></div></td>
</tr>
<tr>
<td><label for="phone"> Telephone No. : </label></td>
<td><input type="text" name="phone" id="phone"/></td>
<td><div id="phoneTip"></div></td>
</tr>
<tr>
<td><label for="email"> Email address: </label></td>
<td><input type="text" name="email" id="email"/></td>
<td><div id="emailTip"></div></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" id="submit" value=" submit "/></td>
<td></td>
</tr>
</tbody>
</table>
</form>
<script>
$.formValidator.initConfig({ // Used to configure the current formValidator The plug-in
formID:"myfm",
debug:false,
submitOnce:true,
validatorGroup : '1', // Sets the validation group. The default value is 1
onSuccess : function(){ // Verify the successful callback function
},
onError:function(){ // Callback function after validation failure
}
});
$('#uname').formValidator({
ValidatorGroup : '1', // Validation group for 1
onEmpty : ' The user name cannot be empty ', // Prompts that the user name cannot be empty
onShow : "",
onFocus : ' User name must be 1 to 12 A digit number or letter ',// Form elements are prompted for the format to be entered when they are in focus
onCorrect : ' User name entered correctly ' // Enter the correct prompt
})
.regexValidator({
regExp : '^[0-9a-zA-Z]{1,12}$', // The regular expression that validates the form input
onError : ' Incorrect user name format, please re-enter ' // Prompt for incorrect input
})
.ajaxValidator({ // Verify that the entered user name already exists
dataType : 'html', // The format of the requested data
async : true, // asynchronous
url : 'test.php',
success : function(data){
if (data=='false') {
return false;
}else{
return true;
}
},
onError : ' The user name already exists, please re-enter it ',
onWait : ' Please wait while the user name is being validated ...'
});
$('#pwd').formValidator({
ValidatorGroup : '1',
onEmpty : ' The password cannot be empty ',
onShow : "",
onFocus : ' Password must be 6 A letter or number above a digit ',
onCorrect : ' Password entered correctly '
})
.regexValidator({
regExp : '[0-9a-zA-Z]{6,}',
onError : ' The password is incorrectly formatted, please re-enter it '
});
$('#repwd').formValidator({
ValidatorGroup : '1',
onEmpty : ' The password cannot be empty ',
onShow : "",
onFocus : ' Password must be 6 A letter or number above a digit ',
onCorrect : ' Password entered correctly '
})
.regexValidator({
regExp : '^[0-9a-zA-Z]{6,}$',
onError : ' Incorrect password format '
})
.compareValidator({ // Compare the two inputs to see if they match the comparison symbols given below
desID : 'pwd', // Compared to the form elements ID value
operateor : '=', // The relationship between the two elements to be compared
onError : ' The password is not entered twice 1 To, please re-enter ' // Do not satisfy the above relationship when the prompt
});
$('#num').formValidator({
ValidatorGroup : '1',
onEmpty : ' Id CARDS cannot be empty ',
onShow : '',
onFocus : ' Please enter your ID number ',
onCorrect : ' Id card with correct format '
}).regexValidator({
regExp : '^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{4}$',
//15 A regular expression for a bit ID number /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/
onError : ' Id card format is wrong, please re-input '
});
$('#phone').formValidator({
ValidatorGroup : '1',
onEmpty : ' The cell phone number cannot be empty ',
onShow : '',
onFocus : ' Please enter your mobile phone number ',
onCorrect : ' The phone number is formatted correctly ',
})
.regexValidator({
regExp : '^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$',
onError : ' The format of mobile phone number is wrong, please re-enter '
});
$('#email').formValidator({
ValidatorGroup : '1',
onEmpty : ' The email address cannot be empty ',
onShow : '',
onFocus : ' Please enter your email address ',
onCorrect : ' Correct email format '
})
.regexValidator({
regExp : '^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$',
onError : ' Incorrect email format, please re-enter '
});
</script>
</body>
</html>
php Part code:
<?php
header('Content-Type:html');
$name=array('Tom','ervin','Jhon');
$uname=$_REQUEST['uname'];
$notexit='true';
for ($i=0; $i <3 ; $i++) {
if ($uname==$name[$i]) {
$notexit='false';
break;
}else{
}
}
echo "$notexit";
?>