js表单验证，并显示红色警告

最新推荐文章于 2023-11-21 10:05:43 发布

digger_419

最新推荐文章于 2023-11-21 10:05:43 发布

阅读量6.8k

点赞数 7

分类专栏： js

本文链接：https://blog.csdn.net/digger_419/article/details/62896557

版权

js 专栏收录该内容

2 篇文章

订阅专栏

我们在表单输入数据的时候，往往需要对输入的数据进行验证，如字段非空，邮箱格式，手机号，电话号等等。下面我将最近使用的表单验证分享一下。下面的#name对应的都是input

<script>

var checkObject = {
    checkUsername: function (value) {
        if(value == ""){
            $("#username").attr("style", "display:inline");
            $("#username").html("*用户名不能为空！");
            $("#submit").attr('disabled',true);
        }else{
            $("#username").attr("style", "display:none");
            $("#submit").attr('disabled',false);
        }
    },
    checkPhone: function (value) {
        var p = new RegExp(/^1[34578]\d{9}$/);
        if(value == ""){
            $("#phone").attr("style", "display:inline");
            $("#phone").html("*手机号不能为空！");
            $("#submit").attr('disabled',true);
        }else if(!value.match(p)){
            $("#phone").attr("style", "display:inline");
            $("#phone").html("*手机号有误，请修正！"); //手机号格式验证
            $("#submit").attr('disabled',true);
        }
        else{
            $("#admin_phone").attr("style", "display:none");
            $("#submit").attr('disabled',false);
        }
    },
    checkEmail: function (value) {
        var re=/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
        if(!re.test(value)){
            $("#email").attr("style", "display:inline");
            $("#email").html("*邮箱格式不正确！");
            $("#submit").attr('disabled',true);
        }else{
            $("#email").attr("style", "display:none");
            $("#email").attr('disabled',false);
        }
    }

       checkID: function (value) {
        var i = new RegExp(/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/);
    	if(!value.match(i)){
           $("#IdCard").attr("style", "display:inline");
           $("#IdCard").html("*身份证号有误，请修正！");
           $("#submit").attr('disabled',true);
        }
    	else{
           $("#IdCard").attr("style", "display:none");
           $("#submit").attr('disabled',false);
    	}
},
}

</scipt>

另外，还有验证输入类型的，如只能输入非零整数

function checkNumber(number){
    var r1 =/^\+?[1-9][0-9]*$/;  //正整数
    var r2= /^-[0-9]*[1-9][0-9]*$/;  //负整数
    if(!r1.test(number) && !r2.test(number)){
        $("p").attr("style", "display:visibility");//单个属性的设置
        $("p span").html("只允许输入非零整数");
        $("#submit").attr('disabled',true);
    }
    else if(number == ""){
        $("p ").attr("style", "display:visibility");//单个属性的设置
        $("p span").html("不能为空！");
        $("#submit").attr('disabled',true);
    }
    else{
        $("p ").attr("style", "display:none");//单个属性的设置
        $("#submit").attr('disabled',false);
    }
}

其中在html代码中用 required onkeyup来调用js函数，

 <div id="username" class="admin_modify_warn" style="display: none;"></div> //这句代码用来显示红色提醒

<div class="form-group">
    <label class="col-sm-2 control-label">用户名</label>

    <div class="col-sm-10">
        <input class="form-control" name="username" placeholder="" value="{$user.username}" type="text"
               required οnkeyup="checkObject.checkUsername(this.value)">
        <div id="username" class="modify_warn" style="display: none;"></div>
    </div>
</div>

此外，还有些常用的正则表达式, 如qq:

var qq = new RegExp(/^[1-9][0-9]{4,9}$/);

补充：1.短时间段(如：08:00-09:00;10:00-12:00)时间格式的验证：

^\d{2}:\d{2}-\d{2}:\d{2};\d{2}:\d{2}-\d{2}:\d{2}$

如果时间格式确定，时间段的个数不确定，可以写为( 后面的括起来，*)：^\d{2}:\d{2}-\d{2}:\d{2}(;\d{2}:\d{2}-\d{2}:\d{2})*$	
2.两种时间格式正则表达式 --HH:mm, HH:mm:ss
   HH:mm       /^[0-2][0-9]:[0-5][0-9]$/  或者  /^(?:[01]\d|2[0-3])(?::[0-5]\d)$/;

   HH:mm:ss    /^[0-2][0-9]:[0-5][0-9]:[0-5][0-9]$/    或者  /^(?:[01]\d|2[0-3])(?::[0-5]\d){2}$/