<code
class
=
"language-html"
>
<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>
<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({
formID:
"myfm"
,
debug: false,
submitOnce: true,
validatorGroup:
'1'
,
onSuccess:
function
() {
},
onError:
function
() {
}
});
$(
'#uname'
).formValidator({
ValidatorGroup:
'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'
,
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}$'
,
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>
</code>