2020-07-20 JS学习表单验证

作者: 红酒煮咖啡 | 来源:发表于2020-07-20 18:53 被阅读0次

2020-07-20 JS学习表单验证
2018-08-23
工作中用到的前端框架插件
表单验证课堂笔记
vue-validator
群邮VI - 汇总
群邮 VI - 技术组部分
js表单验证
js 表单验证
js表单验证

根据正则表达式的要求，表单内容输入正确或错误在输入框后面都有相应的提示。信息错误时点击提交按钮提交失败，光标返回用户名。重置按钮重置表单以及表单提示信息。
1、html文件表单

<form name="form1" onsubmit="return checkAll()" onreset="return formreset()">
    用户名：<input type="text" name="username" /><span id="namemsg"></span><br>
    手机号：<input type="text" name="phone" /><span id="phonemsg"></span><br>
    <input type="submit" value="提交" name="sub" />
    <input type="reset" value="重置" name="reset"/>
</form>

2、css文件，设置输入正确和错误时提示信息的颜色

span{
    font-size: 14px;
}
span.r{
    color: #009900;
    font-size: 14px;
}
span.f{
    color: #FF0000;
}

3、js文件

//1、分别验证用户名,手机号格式是否正确
//2、去验证提交表，保证用户名和手机号是正确的
//验证用户名：保证输入的内容3-30位字母数字组合。一边填写用户名，span一遍出现提示
//使用的事件onkeyup
//验证手机号原理同用户名
//验证表单：可以验证用户名和手机号提示信息，如果提示信息正确就可以提交，否则，就重新写；
window.onload=function(){
    //验证用户名
    document.form1.username.onkeyup=function(){
        var reg=/^\w{3,30}$/;
        if(reg.test(this.value)){
            document.getElementById("namemsg").innerHTML="输入正确";
            document.getElementById("namemsg").setAttribute("class","r");
        }else{
            document.getElementById("namemsg").innerHTML="请输入3-30位字母数字组合";
            document.getElementById("namemsg").setAttribute("class","f");
        }
        
    }
    //验证手机号
    document.form2.phone.onkeyup=function(){
        var phone_reg=/^(13|15|17|18|19)\d{9}$/;
        if(phone_reg.test(this.value)){
            document.getElementById("phonemsg").innerHTML="输入正确";
            document.getElementById("phonemsg").setAttribute("class","r");
        }else{
            document.getElementById("phonemsg").innerHTML="请输入13或15或17或18或19开头的11位数字";
            document.getElementById("phonemsg").setAttribute("class","f");
        }
    }
}

//验证提交
function checkAll(){
    //验证用户名，如果用户名后面有提示信息，调用类不是正确的类，r，那么就让用户名获得焦点，并且不让表单其提交
    if(document.getElementById("namemsg").getAttribute("class")!="r"){
        document.form2.username.focus();//让用户名获得焦点
        return false;
    }
}
//表单重置提示信息重置
function formreset(){
    document.getElementById("namemsg").innerHTML="";
    document.getElementById("phonemsg").innerHTML="";
}