登录注册页面的验证
程序员文章站
2023-12-28 13:33:04
...
登录注册验证是我们平时生活中碰到的最常见的验证,可以说是处处可见。
总结常见的验证流程:
- 用户选中某一个输入框,显示输入框的提示信息。
- 输入该输入框的信息。
- 用户输入完一段信息后,选中下一个输入框,这时上一个输入框失去焦点,开始对用户输入的信息进行判定。
- 判定分为很多,当然也有一边输入一边判定的。判定完毕后显示提示信息。
- 重复以上4个步骤,直到需要用户输入的数据全部都符合要求。
- 提交表单
这里拿百度的注册页面做一个简单的案例。我这里并没有在失去输入框焦点时做验证,而是一同放在了点击提交按钮时验证。
选中输入框时
一般来说,当用户选中某个输入框时,我们应该将该输入框需要输入的数据有什么要求告知给用户,也就是展示出来。当然,有的界面是直接将提示信息展示了,大致都相同。
// 获得焦点事件
function focus(){
// 给有提示信息的和没提示信息的分开绑定
if(this.parentNode.getElementsByTagName('div').length == 2){
// 显示提示信息
this.nextElementSibling.className = 'tips'
// 隐藏提交后的提示信息
this.parentNode.querySelector('div:last-child').className = 'none'
}else{
this.parentNode.querySelector('div:last-child').className = 'none'
}
}
这里提示信息指的是验证该输入框后的提示信息。如果我们提交了一次表单后,会把对输入框的验证结果提示信息展示出来,所以我们展示输入框的输入提示信息时,需要把验证结果提示信息隐藏。
验证
当我们点击提交按钮时,会对输入的信息挨个检测,并将检测后的提示信息展示出来。
// 添加表单提交事件
document.querySelectorAll('#form button')[1].onclick = function(){
var bool = true
// 将5个input的框的条件放入数组
var bools = [
(function(){
var len = 0
for(var i = 0; i < inputs[0].value.length; i++){
if(inputs[0].value[i] >= '\u4e00' && inputs[0].value[i] <= '\u9fa5'){
len += 2
}else if(regtest(/\w/, inputs[0].value[i])){
len++
}else{ return false }
}
if(len > 14 || len == 0){ return false }
return true
})(),
regtest(/^(1[3-9]\d{9})$/, inputs[1].value),
regtest(/\w{8,16}/, inputs[2].value),
regtest(/\d{4}/, inputs[3].value) && inputs[3].value == num,
inputs[4].checked
]
// 遍历inputs
for(var i = 0; i < inputs.length; i++){
// 调用检测input框值的方法
if(!getBool(bools[i], i)){
bool = false
}
}
return bool
}