html5表单原生自定义验证的完善

在我上篇博客https://my.oschina.net/u/3470006/blog/1505758html5表单原生自定义验证中用户名其实存在问题，用户名以拼音方式输入时会强制输入字母并突破字数限制，虽然后台再验证可以拦截非法输入，但这样的体验仍是不好的，我决定加以改进

首先，将html改成如下

            <form method="post" action="Login/Register" onsubmit="CheckUserName()">
                <input type="text" id="username" placeholder="用户名(只能是数字或字母)" maxlength="25" required autofocus
                       name="UserName" onblur="if(value!='')CheckUserName()">
                <input type="password" id="password" placeholder="密码" maxlength="25" required minlength="6"
                       name="Password" oninput="if(value.length>5)CheckPassword()"><span style="color:#23de17;"
                                                                                         id="ViewPasswordRule"
                                                                                         onclick="ShowPasswordRule()">查看密码规则</span><br>
                <button type="submit" id="Register">确认注册</button>
            </form>

用户名标配：默认的提示，最大25，必填，自动聚焦

我将检测用户名的函数改了下，改成了下面两个

function CheckUserName() {
    var UserNameBox=document.getElementById("username")
    var reg=new RegExp("^[A-Za-z0-9]+$")
    if(reg.test(UserNameBox.value)){
        UserNameBox.setCustomValidity("")
        CheckUserNameIsExits()
    }
    else{
        UserNameBox.setCustomValidity("用户名只能为字母或数字")
    }
}
function CheckUserNameIsExits() {
    $.get("Index/Index/CheckUserIsExitsByUserName", {UserName: document.getElementById("username").value}, function (a) {
        var UserNameBox = document.getElementById("username")
        if (a === true) {
            UserNameBox.setCustomValidity("该用户已存在")
        } else {
            UserNameBox.setCustomValidity("")
        }
    })
}

在CheckUserName里加了检测是否数字或字母的正则表达式，给予“用户名只能为字母或数字”的提示，在通过此检测后再给予检测用户是否存在的检测，这个接口我还没有进行封装

检测用户名我在失去焦点和表单提交时进行了检测，if(value!="")是为了不覆盖原生必填提示

这样，用户名的前端检测已经完善，用户想要作死或小人想要破坏还是要在服务端进行再验证

html5表单原生自定义验证的完善

猜你喜欢