您的位置：首页 > 其它

正则表达式--表单验证

2017-07-07 18:32 204 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
body{background: #ccc;}
label{width: 40px; display: inline-block;}
span{color: red;}
.container{margin: 100px auto; width: 400px; padding: 50px; line-height: 40px; border: 1px solid #999; background: #efefef;}
span{margin-left: 30px; font-size: 12px;}
</style>
<body>
<div class="container">
<label>QQ</label><input type="text" id="inp1"><span></span><br>
<label>手机</label><input type="text" id="inp2"><span></span><br>
<label>昵称</label><input type="text" id="inp3"><span></span><br>
<label>密码</label><input type="password" id="inp4"><span></span><br>
<label>邮箱</label><input type="text" id="inp5"><span></span><br>
</div>
</body>
<script type="text/javascript">
var g = function(id){return document.getElementById(id);}
var changed = function(id, fn){
g(id).onchange = fn;
}
var setNextHtml = function(id, html){
g(id).nextSibling.innerHTML = html;
}
var val = function(id){
return g(id).value;
}
changed('inp1', function(){
if(/^\d{5,11}$/.test(val('inp1'))){
setNextHtml('inp1', '');
}else{
setNextHtml('inp1', '请输入5到11位数字');
}
});
changed('inp2', function(){
if(/^1\d{12}$/.test(val('inp2'))){
setNextHtml('inp2', '');
}else{
setNextHtml('inp2', '数字1开头，13位的数字');
}
});
changed('inp3', function(){
if(/^[\w\-\u4e00-\u9fa5]{1,7}$/.test(val('inp3'))){
setNextHtml('inp3', '')
}else{
setNextHtml('inp3', '1到7位')
}
});
changed('inp4', function(){
if(/^[A-Z]\w{1,15}$/.test(val('inp4'))){
setNextHtml('inp4', '');
}else{
setNextHtml('inp4', '首字母大写，1到16位');
}
});
changed('inp5', function(){
if(/^[\w\-\.]+\@[\w]+\.[\w]{2,4}/.test(val('inp5'))){
setNextHtml('inp5', '')
}else{
setNextHtml('inp5', '请输入正确邮箱格式')
}
});
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航