JavaScript实现简单的注册表单校验
js实现简单的注册表单校验
案例分析：
⼀般在我们注册时页⾯会要求我们填写基本信息，⽽信息格式的正确与否决定了我们能否注册成功。
当我们写完⼀⾏注册信息，⿏标焦点离开当前⾏时，⾏会⽤我们填写的信息去与后台编写的正则表达式匹配，若不符合格式，给出提⽰，反之。
技术总结：
onblur()—失去焦点事件
对象.innerHTML=" "-----对提⽰标签插⼊内容
正则表达式.test(校验对象)----这⾥将信息与正则表达式做匹配⽤的是test()⽅法
步骤分析：
确定事件=onblur(“失去焦点”事件)
编写正则表达式确定校验规则
编写校验函数
⼀ ：下⾯给出我的HTML页⾯(很简单)
<form action="#" method="post">
<table width="60%" height="60%"  align="center">
<tr>
<td colspan="3">会员注册USER REGISTER</td>
</tr>
<tr>
<td width="20%">⽤户名:</td>
/
/给这⼀⾏id为username，触发onblur事件的函数为checkUsername
<td width="40%"><input type="text" id="username" onblur="checkUsername()"></td>
//这⼀⾏为提⽰⾏，使⽤span标签插⼊，接在注册⾏后⾯，id为username_msg
<td width="40%"><span id="username_msg"></span></td>
</tr>
<tr>
<td width="20%">密码:</td>
//给这⼀⾏id为password，触发onblur事件的函数为checkPassword
<td width="40%"><input type="password" id="password" onblur="checkPassword()"></td>
//这⼀⾏为提⽰⾏，使⽤span标签插⼊，接在注册⾏后⾯，id为username_msg
<td width="40%"><span id="password_msg"></span></td>
</tr>
<tr>
input绑定onblur事件<td colspan="2" align="center">
<input type="submit" value="注册"/>
</td>
</tr>
</table>
</form>
效果图：
⼆ ：正则表达式引⽤别⼈写好的，如下：
三 ：编写函数
function checkUsername(){
//⽤户名校验
var ElementById("username").value
var ElementById("username_msg");
if(/^\s*$/.test(usernameVal)){
usernamemsgObj.innerHTML="<font color='red'>⽤户名不能为空</font>"; return false;
}else if(!/^[a-z0-9_-]{3,16}$/.test(usernameVal)){
//if语句中的叹号----如果usernameVal的值与正则表达式不匹配，则提⽰错误。  usernamemsgObj.innerHTML="<font color='red'>⽤户名格式错误</font>"; return false;
}else{
usernamemsgObj.innerHTML="";//将提⽰信息清空
}
return true;
}
function checkPassword(){
//密码校验
var ElementById("password").value;
var ElementById("password_msg");
if(/^\s*$/.test(passwordVal)){
passwordmsgObj.innerHTML="<font color='red'>密码不能为空</font>"; return false;
}else if(!/^[a-z0-9_-]{6,18}$/.test(passwordVal)){
passwordmsgObj.innerHTML="<font color='red'>密码格式错误</font>"; return false;
}else{
passwordmsgObj.innerHTML="";
}
return true;
}
四 ：效果展⽰
输⼊⼀串空格或者不输⼊，当⿏标点击页⾯其他地⽅时，后⾯红⾊字体提⽰⽤户名不能为空
输⼊⼀串不规则字符，当⿏标点击页⾯其他地⽅时，后⾯红⾊字体提⽰⽤户名格式错误
密码的效果就不展⽰了，与⽤户名⼀样。
另：⼤家也可以尝试校验其它信息，如邮箱校验等等，写法⼤同⼩异。
感谢收看！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。