登录注册界面如何判断输入的格式

一般网站都会有账号登录这个界面，而在输入完号码时，进行下一步或点击登录注册按钮时，若输入的号码不符合当前框的格式要求，一般会自动显示红字，显示输入的格式不正确。这方式一般用正则表达式来进行判断。
正则表达式描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。用人话说，正则表达式就是描述了一串数字的格式，格式能定义很多种，比如手机号格式、邮箱格式、密码6位数字到12位数字等等，也可以自己定义一串数字格式。 有的格式不会写可以去网上的正则表达式在线测试，在测试窗口下面一般会有格式大全。如图：

要显示出错误提示，需要先在html页面上相应输入框旁边位置写错误提示文字，然后用display:none;让其消失，后面的js部分会判断错误，然后选择none消失或者block显现。html如图：

下面，创建js文件，并导入相应的输入框以及错误提示的元素，给点击登录或者注册按钮创建点击事件，点击事件里给相应的元素赋上正则表达式，然后用if-else判断test()的真假，登录界面的判断就完成了。js代码如下：

var ipt1=document.getElementsByTagName("input")[0];
var ipt2=document.getElementsByTagName("input")[1];
var bodys=document.getElementsByTagName("body")[0];

// 创建登录按钮进行验证
var phones=document.getElementById("phone");
var passs=document.getElementById("pass");
var btn=document.getElementsByTagName("input")[2];
btn.addEventListener('click',function(){
    var str=ipt1.value;
    var phone=/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
    // console.log(phone.test(str))
    var str1=ipt2.value;
    var pass=/^\d{6,12}$/;

    if(phone.test(str)){
        phones.style.display="none";
    }
    else{
        phones.style.display="block";
    }

    if(pass.test(str1)){
        passs.style.display="none";
    }
    else{
        passs.style.display="block";
    }
})

效果如下：