JS简单验证

Posted 下页、再停留

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS简单验证相关的知识,希望对你有一定的参考价值。

1.验证是否全为数字

2.验证邮箱

3验证手机号

4.验证身份证号

5.验证时间格式

下面是代码,可直接用,有注释

<html>
<meta charset="utf-8">
<head>
    <title></title>
</head>
<script type="text/javascript">
//验证是否全部为数字
function checkNum(){
    //获取num的值,并过滤两边多余的空格
    var num = document.getElementById(\'num\').value.trim();
    //判断是否匹配
    if (num.match(/^[0-9]*$/g) == null) {
        //不匹配提示,并返回false
        document.getElementById(\'tip1\').innerHTML="<font color=\'red\'>不全是数字";
        return false; 
    }else{
        //匹配提示,并返回true
        document.getElementById(\'tip1\').innerHTML="";
        return true;
        }
    return check();
}

//邮箱验证
function checkEmail(){
    var email = document.getElementById(\'email\').value.trim();
    //以数字,大/小写字母_.-开头,中间是"@.",以大/小写,数字结尾
    if (email.match(/^([a-zA-Z0-9_\\.\\-])+\\@(([a-zA-Z0-9\\-])+\\.)+([a-zA-Z0-9]{2,4})+$/g) == null) {
        document.getElementById(\'tip2\').innerHTML="<font color=\'red\'>邮箱格式不正确";
        return false;
    }else{
        document.getElementById(\'tip2\').innerHTML="";
        return true;
    }
    return check();
}

//检查手机号
function checkTel(){
    var tel = document.getElementById(\'tel\').value.trim();
    //手机号以1开头,第二位是34578,再加上9位数字
    if (tel.match(/^1[34578]\\d{9}$/g) == null) {
        document.getElementById(\'tip3\').innerHTML="<font color=\'red\'>手机号必须是11位的数字";
        return false;
    }else{
        document.getElementById(\'tip3\').innerHTML="";
        return true;
    }
    return check();
}

//检查身份证号
function checkIdcard(){
    var idcard = document.getElementById(\'idcard\').value.trim();
    //身份证号码为15位或者18位,15位时全为数字,18位时前17位为数字,最后一位是校验位,可能为数字或字符X
    if (idcard.match(/(^\\d{15}$)|(^\\d{17}([0-9]|X)$)/g) == null) {
        document.getElementById(\'tip4\').innerHTML="<font color=\'red\'>身份证号必须为15或18位";
        return false;
    }else{
        document.getElementById(\'tip4\').innerHTML="";
        return true;
    }
    return check();
}

//校验时间格式
function checkDate(){
    var date = document.getElementById(\'date\').value.trim();
    //长时间,形如 (2003-12-05 13:04:06)
    if (date.match(/^(\\d{1,4})(-|\\/)(\\d{1,2})\\2(\\d{1,2}) (\\d{1,2}):(\\d{1,2}):(\\d{1,2})$/g) == null) {
        document.getElementById(\'tip5\').innerHTML="<font color=\'red\'>时间格式为2017-5-05 13:04:06";
        return false;
    }else{
        document.getElementById(\'tip5\').innerHTML="";
        return true;
    }
    return check();

}

//总判断函数check(),上述所有函数必须全部判断通过,此函数的返回值才是真,一个为假,此式就为假
function check() {  
    var check =checkNum()&&checkEmail()&&checkTel()&&checkIdcard()&&checkDate();
    if (check) {
        return true;
    }else{
        return false;
    }  
} 
</script>

<body>
<form action="test.php"  method="post" onSubmit="return check();">

验证是否为数字:<input type="text" id="num" name="num" required ><span id="tip1"></span> <br>
验证邮箱格式<input type="text" id="email" name="email" required ><span id="tip2"></span> <br>
验证手机号<input type="text" id="tel" name="tel" required ><span id="tip3"></span> <br>
验证身份证号<input type="text" id="idcard" name="idcard" required ><span id="tip4"></span> <br>
验证时间格式<input type="text" id="date" name="date" required ><span id="tip5"></span> <br>

<input type="submit" value="提交">
</form>

</body>
</html>

运行结果如图:

当验证全部通过时,会通过post方式提交给后台!

 

以上是关于JS简单验证的主要内容,如果未能解决你的问题,请参考以下文章

ajaxFileUpload上传带参数文件及JS验证文件大小

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js

php生成各种验证码

VSCode自定义代码片段——JS中的面向对象编程

XSS:如何从 C# 中的字符串中删除 JS 片段?

VSCode自定义代码片段9——JS中的面向对象编程