jQuery插件之validation插件

2020-05-24 21:27:59易采站长站整理

远程校验

使用 ajax 方式进行验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用 data 选项

[注意]远程地址只能输出 “true” 或 “false”,不能有其他输出


remote: {
url: "check-email.php", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据
username: function() {
return $("#username").val();
}
}
}


<style>
label.error{margin-left:6px;padding-left:14px;color:red;background: no-repeat 0 4px;background-image:url('data:image/gif;base64,R0lGODlhDgAOAMQAAOpSAPWpgPvf0O5zMPGIUPe+n////+tdEPjJsP718POecO1oIPrUwPzq4Pa0kPKTYPSof////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUUABEALAAAAAAOAA4AAAVcYCQm0AAAA5SIbHGcMHAULazEJ528AGIsgADDIUsEYAYDopBsAAOmXDLpOkVPB0ETFxskpjeY6fD4GhrJBAF1zCYDBx/jFYi8DoEH9yAqcGM0fTwxMywsUFZ1LCEAOw==');}
</style>
<form id="demoForm">
<p>
<label for="num">请选择数字</label>
<select name="num" id="num">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</p>
<p>
<input type="button" value="提交">
</p>
</form>
<script>
$('#demoForm').validate({
rules:{
num:{
remote:"validateTest.php"
}
},
messages:{
num:{
remote:"选择的数字不正确"
}
}
});
</script>


<?php
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
$data = test_input($_REQUEST['num']);
if($data == '2'){
echo "true";
}else{
echo "false";
}
?>

最后

validation插件的功能不只于此,但本文基本上把常用的功能进行了详细的介绍。如果要了解validation更高级的功能,请移步官方网站

最后介绍一个比较有趣的知识——validate、validation和validator,它们的中文意思是验证。validation插件的js文件名是validate.js,validation插件中最常用的方法就是validate()方法,基本上所有的验证操作都通过该方法进行。如果要进行自定义验证的话,则需要用到validator对象下的静态方法addMethod()