JS常见的表单验证，H5自带的验证和正则表达式的验证

H5验证

自带的验证无法满足需求：

<form action="" method="get">
    name:input type="text" name="name"><br
    email:="email"="email"
    age:="number"="number">
    ="submit">
</form>

几十输入不科学的数据依然能够通过验证

接下来是一个表单验证的案例

index.html

<!DOCTYPE htmlhtml lang="en"headMeta charset="UTF-8"name="viewport" content="width=device-width,initial-scale=1.0"title>Documentstyle>
        *{
            margin:0;
            padding;
        }
        body
            background-color rgb(231,230,232)
        .container
            width1000px50px auto
            border-radius5px
            font-size12px
            Box-shadow3px 3px 3px #ccc
            color#333
        .container h3 rgb(97,134,213)
            text-align center#fff10px5px 5px 0 0
            letter-spacing .5em
        .item
            height49px10px 50px #fff
            border-bottom1px solid #444
            position relative
        .item label
            font-weightbold
            display inline-block
            margin-top
        .item input400px20px
            line-height
            border1px solid #ccc absolute
            left150px
        .item spanrgb(97,1)">}
        /*设置placeholder字体颜色*/
        input::-webkit-input-placeholder {       WebKit browsers  #ccc
        input:-moz-placeholder {                 Mozilla Firefox 4 to 18 
        input::-moz-placeholder {                Mozilla Firefox 19+ 
        input:-ms-input-placeholder {            Internet Explorer 10+ 
        .submit-Box50px 50px;    

        
        .submit-Box .check
            margin-right
        .submit-Box .submit100px30px 5px1px solid #ddd
            margin-left;    
        
        .tip}
    bodydiv class="container"h3>---账户信息--- id="form">
        ="item">
            label for=""span>*> 用户名：label="username" placeholder="用户设置成功后不可修改"p ="tip"></pdiv> 登录密码：="password"="pwd"="6-20位字母，数字或符号"> 确认密码：="repwd"="请再次输入密码"> 姓名：="Cname"="请输入姓名，中文且最多五位"> 身份证号：="idNum"="请输入身份证号"> 邮箱：="请输入正确邮箱格式"> 手机号码：="phone"="请输入您的手机号码"="submit-Box"="checkBox" class="check">我已阅读并同意遵守规定="submit" value="确定提交">

script src="index.js"scripthtml>

index.js

var username=document.getElementById("username");
var pwd=document.getElementById("pwd"var repwd=document.getElementById("repwd"var Cname=document.getElementById("Cname"var idNum=document.getElementById("idNum"var email=document.getElementById("email"var phone=document.getElementById("phone");

var submit=document.getElementById("submit"var form=document.getElementById("form"var tips=document.querySelectorAll(".tip"var reg=/正则/;
var test1=falsevar test2=var test3=var test4=var test5=var test6=var test7=;

//验证用户名，失去焦点时触发
username.onblur=function(){
    var pattern=/^\w{6,18}$/;
    if(this.value==""){this指代当前输入框
        tips[0].innerHTML="用户名不能为空";
        tips[0].style.color="red";
        test1=;
    }else{
        if(pattern.exec(this.value)==null){
            tips[0].innerHTML="请输入6-18位数字、字母或下划线";
            tips[0].style.color="red";
            test1=;
        }{
            tips[0].innerHTML="格式正确";
            tips[0].style.color="green"true;
        }
    }
}

验证密码，失去焦点时触发
pwd.onblur=this指代当前输入框
        tips[1].innerHTML="密码不能为空";
        tips[1].style.color="red";
        test2=){
            tips[1].innerHTML="请输入6-18位数字、字母或下划线";
            tips[1].style.color="red";
            test2={
            tips[1].innerHTML="格式正确";
            tips[1].style.color="green"确认密码，失去焦点时触发
repwd.onblur=this指代当前输入框
        tips[2].innerHTML="确认密码不能为空";
        tips[2].style.color="red";
        test3=this.value!=pwd.value){
            tips[2].innerHTML="两次密码不一致";
            tips[2].style.color="red";
            test3={
            tips[2].innerHTML="格式正确";
            tips[2].style.color="green"验证中文名，失去焦点时触发
Cname.onblur=var pattern=/^[\u4e00-\u9fa5]{2,5}$/this指代当前输入框
        tips[3].innerHTML="姓名不能为空";
        tips[3].style.color="red";
        test4=){
            tips[3].innerHTML="请输入2-5位中文名";
            tips[3].style.color="red";
            test4={
            tips[3].innerHTML="格式正确";
            tips[3].style.color="green"验证身份证，失去焦点时触发
idNum.onblur=var pattern=/^\d{17}[0-9x]$/this指代当前输入框
        tips[4].innerHTML="身份证不能为空";
        tips[4].style.color="red";
        test5=){
            tips[4].innerHTML="身份证格式错误";
            tips[4].style.color="red";
            test5={
            tips[4].innerHTML="格式正确";
            tips[4].style.color="green"验证邮箱，失去焦点时触发
email.onblur=aa@qq.com
    var pattern=/^\w+@\w+(\.[a-zA-Z_]{2,4})+$/this指代当前输入框
        tips[5].innerHTML="邮箱不能为空";
        tips[5].style.color="red";
        test6=){
            tips[5].innerHTML="邮箱格式错误";
            tips[5].style.color="red";
            test6={
            tips[5].innerHTML="格式正确";
            tips[5].style.color="green"验证手机号，失去焦点时触发
phone.onblur=var pattern=/^\d{11}$/this指代当前输入框
        tips[6].innerHTML="手机号不能为空";
        tips[6].style.color="red";
        test7=){
            tips[6].innerHTML="手机号格式错误";
            tips[6].style.color="red";
            test7={
            tips[6].innerHTML="格式正确";
            tips[6].style.color="green"前面所有数据正确时，才能提交
submit.onclick=if(test1 && test2 && test3 && test4 && test5 && test6 && test7){
        form.submit();
    }{
        alert("信息填写有误");
    }
}

效果图

JS常见的表单验证，H5自带的验证和正则表达式的验证

相关推荐