javascript制作的简单注册模块表单验证

javascript制作的简单注册模块表单验证

javascript制作的简单注册模块表单验证通常在我们的HTML页面表单中有大量的数据验证工作， 免不了要写很多验证表单的js代码，这是一项非常繁琐枯燥的工作。很多程序员也会经常遗漏这项工作。所以写了这一 段JavaScript代码提供给大家使用。使用起来很简单，大家拿回去自由扩展吧

一个注册框 进行表单验证处理 如图有简单的验证提示功能 代码思路也比较简单

输入框失去焦点时便检测，并进行处理

表单具有 onsubmit = \行为，处理验证情况 点击提交表单按钮时，进行最终的验证，达到是否通过表单提交的请求。

先是最基本的html+css部分 style type=\ body{margin:0;padding: 0;}

.login{position:relative;margin:100px auto;padding:50px 20px;width: 350px;height: 200px;border:1px solid #333;} .login legend{font-weight: bold;color: green;text-align: center;}

.login label{display:inline-block;width:130px;text-align: right;}

.btn{height: 30px;width:100px;padding:

5px;border:0;background-color: #00dddd;font-weight: bold;cursor: pointer;float: right;} input{height: 20px;width: 170px;} .borderRed{border: 2px solid red;} img{display: none;} style> head> body>

div class=\

form name=\onsubmit=\

legend>【Register】legend>

p>label for=\ input type=\ img src=\height=\

p>label for=\ input type=\ img src=\

height=\

p>label for=\ input type=\ img src=\height=\

p>label for=\ input type=\ img src=\height=\

p>input type=\class=\ form> div>

然后是js的class相关处理函数

function hasClass(obj,cls){ // 判断obj是否有此class return obj.className.match(new RegExp('(\\\\s|^)' + cls + '(\\\\s|$)')); }

function addClass(obj,cls){ //给 obj添加class if(!this.hasClass(obj,cls)){ obj.className += \

} }

function removeClass(obj,cls){ //移除obj对应的class if(hasClass(obj,cls)){

var reg = new RegExp('(\\\\s|^)' + cls + '(\\\\s|$)'); obj.className = obj.className.replace(reg,\ } }

然后是验证各个输入框的值

function checkName(name){ //验证name

if(name != \不为空则正确，当然也可以ajax异步获取服务器判断用户名不重复则正确

removeClass(ele.name,\移除class document.images[0].setAttribute(\//对应图标

document.images[0].style.display = \显示 return true; }else{ //name不符合

addClass(ele.name,\添加class

document.images[0].setAttribute(\对