正文
JS实战 · 表单验证
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
思路：
1、定义页面
通过表格格式化表单；
表格行都有自己的背景颜色；
单元格中的数据(文本等)用div进行封装，好操作；
2、定义样式
表格的样式；
div的样式；
3、动态效果
页面加载时，将所有的输入框定义默认框线颜色和获取焦点时的框线颜色；
进行内容校验，不正确时显示警告信息。
代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>表单验证</title>
<!-- 思路：
1、定义页面
通过表格格式化表单；
表格行都有自己的背景颜色；
单元格中的数据(文本等)用div进行封装，好操作；
2、定义样式
表格的样式；
div的样式；
3、动态效果
页面加载时，将所有的输入框定义默认框线颜色和获取焦点时的框线颜色；
进行内容校验，不正确时显示警告信息。
-->
<style type="text/css">
table{
border: #A50DFA 1px solid;
width: 500px;
border-collapse: collapse;
}
table th, table td{
border: #A50DFA 1px solid;
padding:10px;
}
table th{
}
table td{
}
.errorinfo{
color: #EA1508;
font-family: "华文行楷";
font-weight: bold;
display: none;
}
.focus{
border: #03F2FC 2px solid;
}
.outs{
border: #81710D 1px solid;
}
.error{
border: #FA0324 2px solid;
}
</style>
<script type="text/javascript">
function checkinput(input){
input.className = "outs";
input.onfocus = function(){
this.className = "focus";
}
}
/*窗口加载时就执行*/
window.onload = function(){
with(document.forms[0]){
checkinput(user);
checkinput(psw);
checkinput(repsw);
checkinput(mail);
}
}
/*验证输入的数据*/
/*方法一：每个输入框一个function，代码重复性高,舍弃不用。*/
function checkDate(userNode){
var value = userNode.value;
var regex = /^\w{3,5}$/;
var divNode = document.getElementById("userdiv");
if(regex.test(value)){
userNode.className = "outs";
divNode.style.display = "none";
}else{
userNode.className = "error";
divNode.style.display = "block";
}
}
/*方法二*/
function check(inputNode, regex, divId){
var divNode = document.getElementById(divId);
if(regex.test(inputNode.value)){
inputNode.className = "outs";
divNode.style.display = "none";
}else{
inputNode.className = "error";
divNode.style.display = "block";
}
}
/*验证用户名*/
function checkUser(userNode){
var regex = /^\w{3,5}$/;
check(userNode, regex, "userdiv");
}
/*验证密码格式*/
function checkPsw(pswNode){
var regex = /^[a-z0-9]{4,8}$/i;
check(pswNode, regex, "pswdiv");
}
/*验证两次密码是否一致*/
function checkRepsw(repswNode){
var psw = document.getElementById("psw").value;
var repsw = repswNode.value;
var divNode = document.getElementById("repswdiv");
if(psw == repsw){
repswNode.className = "outs";
divNode.style.display = "none";
}else{
repswNode.className = "error";
divNode.style.display = "block";
}
}
/*验证邮箱*/
function checkMail(mailNode){
var regex = /^\w+@\w+(\.\w+)+$/;
check(mailNode, regex, "maildiv");
}
</script>
</head>
<body>
<form>
<table>
<tr>
<th>用户注册</th>
</tr>
<tr>
<td>
<div>用户名</div>
<div>
<input type="text" name="user" onblur="checkUser(this)"/>
</div>
<div class="errorinfo" id="userdiv">用户名填写错误。</div>
<div>用户名必须是3-5位，由字母(a-z)、数字(0-9)、下划线(_)组成</div>
</td>
</tr>
<tr>
<td>
<div>密码</div>
<div>
<input type="password" name="psw" id="psw" onblur="checkPsw(this)"/>
</div>
<div class="errorinfo" id="pswdiv">密码格式错误。</div><br/>
<div>确认密码</div>
<div>
<input type="password" name="repsw" onblur="checkRepsw(this)"/>
</div>
<div class="errorinfo" id="repswdiv">两次输入密码不一致。</div>
<div>密码必须是4-8位，由字母(a-z)、数字(0-9)组成</div>
</td>
</tr>
<tr>
<td>
<div>邮箱</div>
<div>
<input type="text" name="mail" onblur="checkMail(this)"/>
</div>
<div class="errorinfo" id="maildiv">邮箱格式错误，请规范填写。</div>
</td>
</tr>
<tr>
<th><input type="button" value="提交数据" onclick="submitDate()"></th>
</tr>
</table>
</form>
</body>
</html>
