jQuery formValidator表单验证
作为一名程序员,在解决工作中遇到问题之后,做一些总结是有必要的,既方便总结温习相关知识点,也为广大的程序员提供了一些工作经历,给予同行一面明鉴.
html部分:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>formValidator</title>
<scriptsrc="js/jquery-1.11.1.js"></script>
<scriptsrc="js/formValidator-4.0.1.min.js"></script>
<scriptsrc="js/DateTimeMask.js"></script>
<scriptsrc="js/formValidatorRegex.js"></script>
<linkrel="stylesheet"href="css/validator.css">
<style>
form{
width:500px;
margin:100pxauto;
}
tabletrtd:first-child{
text-align:right;
}
tabletrtd{
padding:5px0;
}
div{
margin-left:10px;
padding:010px;
}
</style>
</head>
<body>
<formname="myfm"id="myfm"action="1.html">
<table>
<tbody>
<tr>
<td><labelfor="uname">用户名:</label></td>
<td><inputtype="text"id="uname"name="uname"/></td>
<td><divid="unameTip"></div></td>
</tr>
<tr>
<td><labelfor="pwd">密码:</label></td>
<td><inputtype="password"id="pwd"name="pwd"/></td>
<td><divid="pwdTip"></div></td>
</tr>
<tr>
<td><labelfor="repwd">重复密码:</label></td>
<td><inputtype="password"name="repwd"id="repwd"/></td>
<td><divid="repwdTip"></div></td>
</tr>
<tr>
<td><label>性别:</label></td>
<td>
<inputtype="radio"name="sex"value="male"id="male"/>
<labelfor="male">男</label>
<inputtype="radio"name="sex"value="female"id="female"/>
<labelfor="female">女</label>
</td>
</tr>
<tr>
<td><labelfor="area">地区:</label></td>
<td>
<selectname="area"id="area">
<optionvalue="0">-请选择-</option>
<optionvalue="1">锦江区</option>
<optionvalue="2">金牛区</option>
<optionvalue="3">龙泉驿区</option>
<optionvalue="4">青羊区</option>
</select>
</td>
</tr>
<tr>
<td><labelfor="num">身份证:</label></td>
<td><inputtype="text"id="num"name="num"/></td>
<td><divid="numTip"></div></td>
</tr>
<tr>
<td><labelfor="phone">电话号码:</label></td>
<td><inputtype="text"name="phone"id="phone"/></td>
<td><divid="phoneTip"></div></td>
</tr>
<tr>
<td><labelfor="email">邮箱:</label></td>
<td><inputtype="text"name="email"id="email"/></td>
<td><divid="emailTip"></div></td>
</tr>
<tr>
<td></td>
<td><inputtype="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'){
returnfalse;
}else{
returntrue;
}
},
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";
?>
以上内容是小编给大家介绍的jQueryformValidator表单验证相关知识,希望对大家有所帮助,同时感谢大家对毛票票网站的支持。