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

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

首先，将html改成如下

name="UserName" οnblur="if(value!='')CheckUserName()">

name="Password" οninput="if(value.length>5)CheckPassword()">

id="ViewPasswordRule"

οnclick="ShowPasswordRule()">查看密码规则

确认注册

用户名标配：默认的提示，最大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!="")是为了不覆盖原生必填提示

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