html5自带的表单验证给前端开发带来了极大的方便,但有些验证还是要自己写,比如常见的
注册界面,需要用户重复输入两次密码,这时候自带的type验证还有pattern验证是不能够实现
的。但是可以换一种角度,通过更改第二次输入密码时的pattern来达到验证。我表达的可能
不是很清楚,下面通过一个demo看一下具体的实现。
验证效果截图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input {
margin: 10px;
font-size: 18px;
}
</style>
</head>
<body>
<form action="" name="myform">
<label for="user">用户名
<input type="text" name="user" placeholder="请输入用户名" pattern="[A-z]{3}" required="required"οninput="chePattern(this,'请输入3个字母')" maxlength="3">
</label>
<br>
<label for="password">密 码
<input type="password" name="password" placeholder="请输入密码" required="required" pattern="^\d{3}$"οninput="chePattern(this,'请输入3位数字')" maxlength="3" οnblur="document.myform.password1.pattern=document.myform.password.value;">
</label>
<br>
<label for="password1">密 码
<input type="password" name="password1" placeholder="请再次输入密码" required="required" maxlength="3" οninput="chePattern(this,'两次密码不同')">
</label>
<br>
<label for="submit">
<input type="submit" value="submit" name="submit">
</label>
</form>
<script>
function chePattern(i,tip) {
var v = i.validity;
if (true === v.valueMessing) {
i.setCustomValidity("请填写此字段");
} else {
if (true === v.patternMismatch) {
i.setCustomValidity(tip);
} else {
i.setCustomValidity("");
}
}
}
</script>
</body>
</html>
参考文章 http://tid.tenpay.com/?p=3592