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 = /^\[email protected]\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>

时间: 2024-10-17 10:48:48

JS实战 · 表单验证的相关文章

JS常用表单验证总结

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <ti

★★★【卡法 常用js库】: js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度

[卡法 常用js库]: js汇合 表单验证  cookie设置  日期格式  电话手机号码  email  整数  小数  金额   检查参数长度 // +---------------------------------------------------------------------- // | sunqiang // +---------------------------------------------------------------------- // | Copyrig

[js]js的表单验证onsubmit方法

http://uule.iteye.com/blog/2183622 表单验证类 <form class="form" method="post" id="form" onsubmit="return checkForm(this)" action=""> 电话号码:<input id="tel" type="text" maxlength=&quo

bootstrapValidator.js 做表单验证

有这样的一个场景,我们在提交form表单的时候 可能要做一些验证,比如判断是不是为空,电话的格式验证,邮箱的格式验证等等,手写起来也是可以得. 但是今天我介绍一个bootstrap插件简化开发.就是bootstrapValidator.js. 直接上手写代码. 1.首先 jquery,bootstrap 以及bootstrapValidator(地址https://github.com/nghuuphuoc/bootstrapvalidator) 2.引用jquery bootstrap  bo

不使用JS实现表单验证

我们可以给表单元素添加required,pattern属性,还有根据具体元素类型决定的Measureable属性,如:min,max等. required:表示必填. pattern:一般用于type为text的元素,可以是任意的正则表达式. ID Number: <input type="text" name="idNumber" pattern="\d{5}" required="required" placehol

php用户注册页面利用js进行表单验证具体实例

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

js组件 表单验证

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>validatior demo</title> 6 <style> 7 </style> 8 </head> 9 <body> 10 <div style="height:

jq实战-表单验证

作为学习的记录,放百年大家查看,废话不多说,直接上代码 html 结构: <form action="a.php" method="" class="form"> <div> <label for="username">用户名:</label> <input id="username" class="required" type=&q

js正则表单验证汇总,邮箱验证,日期验证,电话号码验证,url验证,信用卡验证,qq验证

本文主要汇总各种正则验证,很多都是转载,本人也会尽可能验证准确性,如有错误欢迎留言 //trim()方法在有些浏览器中不兼容,最好自己重写一下 String.prototype.trim=function(){ return this.replace(/(^\s*)|(\s*$)/g, ""); } //判断输入内容是否为空 function IsNull(){ var str = document.getElementById('str').value.trim(); if(str.