正则表达式--表单验证

最新推荐文章于 2024-09-26 20:36:49 发布

强哥blog

最新推荐文章于 2024-09-26 20:36:49 发布

阅读量242

点赞数

分类专栏：正则表达式文章标签：正则表达式表单验证正则验证

本文链接：https://blog.csdn.net/qq_36263601/article/details/74762344

版权

正则表达式专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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>