jQuery formValidator表单验证

前端技术 2023/09/06 JavaScript

作为一名程序员，在解决工作中遇到问题之后，做一些总结是有必要的，既方便总结温习相关知识点，也为广大的程序员提供了一些工作经历，给予同行一面明鉴.

html部分：

<!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\">用户名：</label></td>
<td><input type=\"text\" id=\"uname\" name=\"uname\"/></td>
<td><div id=\"unameTip\"></div></td>
</tr>
<tr>
<td><label for=\"pwd\">密码：</label></td>
<td><input type=\"password\" id=\"pwd\" name=\"pwd\"/></td>
<td><div id=\"pwdTip\"></div></td>
</tr>
<tr>
<td><label for=\"repwd\">重复密码：</label></td>
<td><input type=\"password\" name=\"repwd\" id=\"repwd\"/></td>
<td><div id=\"repwdTip\"></div></td>
</tr>
<tr>
<td><label>性别：</label></td>
<td>
<input type=\"radio\" name=\"sex\" value=\"male\" id=\"male\"/>
<label for=\"male\">男</label>
<input type=\"radio\" name=\"sex\" value=\"female\" id=\"female\"/>
<label for=\"female\">女</label>
</td>
</tr>
<tr>
<td><label for=\"area\">地区：</label></td>
<td>
<select name=\"area\" id=\"area\">
<option value=\"0\">- 请选择 -</option>
<option value=\"1\">锦江区</option>
<option value=\"2\">金牛区</option>
<option value=\"3\">龙泉驿区</option>
<option value=\"4\">青羊区</option>
</select>
</td>
</tr>
<tr>
<td><label for=\"num\">身份证：</label></td>
<td><input type=\"text\" id=\"num\" name=\"num\"/></td>
<td><div id=\"numTip\"></div></td>
</tr>
<tr>
<td><label for=\"phone\">电话号码：</label></td>
<td><input type=\"text\" name=\"phone\" id=\"phone\"/></td>
<td><div id=\"phoneTip\"></div></td>
</tr>
<tr>
<td><label for=\"email\">邮箱：</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=\"提交\"/></td>
<td></td>
</tr>
</tbody>
</table>
</form>
<script>
$.formValidator.initConfig({ //用于配置当前formValidator插件
formID:\"myfm\",
debug:false,
submitOnce:true,
validatorGroup : \'1\', //设置验证组，默认值为1
onSuccess : function(){ //验证成功后的回调函数
}, 
onError:function(){ //验证失败后的回调函数
} 
});
$(\'#uname\').formValidator({
ValidatorGroup : \'1\', //验证组为1 
onEmpty : \'用户名不能为空\', //提示用户名不能为空
onShow : \"\", 
onFocus : \'用户名必须为1到12位的数字或字母\',//表单元素获得焦点的时候提示应输入的格式
onCorrect : \'用户名输入正确\' //输入正确的提示
})
.regexValidator({
regExp : \'^[0-9a-zA-Z]{1,12}$\', //验证表单输入的正则表达式
onError : \'用户名格式有误，请从新输入\' //输入错误的提示
})
.ajaxValidator({ //验证输入的用户名是否已经存在
dataType : \'html\', //请求数据的格式
async : true, //异步方式
url : \'test.php\',
success : function(data){
if (data==\'false\') {
return false;
}else{
return true;
}
},
onError : \'该用户名已存在，请从新输入\',
onWait : \'正在对用户名进行合法性校验，请稍候...\'
});
$(\'#pwd\').formValidator({
ValidatorGroup : \'1\',
onEmpty : \'密码不能为空\',
onShow : \"\",
onFocus : \'密码必须为6位以上的字母或数字\',
onCorrect : \'密码输入正确\'
})
.regexValidator({
regExp : \'[0-9a-zA-Z]{6,}\',
onError : \'密码格式有误，请从新输入\'
});
$(\'#repwd\').formValidator({
ValidatorGroup : \'1\',
onEmpty : \'密码不能为空\',
onShow : \"\",
onFocus : \'密码必须为6位以上的字母或数字\',
onCorrect : \'密码输入正确\'
})
.regexValidator({
regExp : \'^[0-9a-zA-Z]{6,}$\',
onError : \'密码格式不正确\'
})
.compareValidator({ //比较两次输入内容是否符合下面给出的比较符号
desID : \'pwd\', //相比较的表单元素的ID值
operateor : \'=\', //要比较的两个元素之间的关系
onError : \'两次密码输入不一致，请从新输入\' //不满足以上关系的时候的提示
});
$(\'#num\').formValidator({
ValidatorGroup : \'1\',
onEmpty : \'身份证不能为空\',
onShow : \'\',
onFocus : \'请输入您的身份证号\',
onCorrect : \'身份证格式正确\'
}).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位身份证号码的正则表达式/^[1-9]\\d{7}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}$/
onError : \'身份证格式有误，请从新输入\'
});
$(\'#phone\').formValidator({
ValidatorGroup : \'1\',
onEmpty : \'手机号码不能为空\',
onShow : \'\',
onFocus : \'请输入您的手机号码\',
onCorrect : \'手机号码格式正确\',
})
.regexValidator({
regExp : \'^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$\',
onError : \'手机号码格式有误，请从新输入\'
});
$(\'#email\').formValidator({
ValidatorGroup : \'1\',
onEmpty : \'邮箱地址不能为空\',
onShow : \'\',
onFocus : \'请输入您的邮箱地址\',
onCorrect : \'邮箱格式正确\'
})
.regexValidator({
regExp : \'^\\\\w+([-+.]\\\\w+)*@\\\\w+([-.]\\\\w+)*\\\\.\\\\w+([-.]\\\\w+)*$\',
onError : \'邮箱格式有误，请从新输入\'
});
</script>
</body>
</html>
php部分代码：
<?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\";
?>

以上内容是小编给大家介绍的jQuery formValidator表单验证相关知识，希望对大家有所帮助，同时感谢大家对phpstudy网站的支持。

本文地址：https://www.stayed.cn/item/15318

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案