javaScript表单动态验证

JavaScript09

javaScript表单动态验证,第1张

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=GB18030">

<title>Insert title here</title>

<style type="text/css">

.error

{

border:1px solid green

color:red

font-size:small

}

</style>

<script type="text/javascript">

function chkfrm()

{

var inputTip=["用户名不能为空","密码不能为空","两次密码不一致","请输入有效的邮箱地址"]

var userName = getObj("user")

var pwd1 = getObj("password")

var pwd2 = getObj("password1")

var eml = getObj("email")

if( userName.value.replace(/[\s]+/i,"")=="" )

{

getObj("userInfo").innerHTML = inputTip[0]

getObj("userInfo").className = "error"

userName.focus()

return false

}

else

{

getObj("userInfo").innerHTML = ""

}

if( pwd1.value == "" )

{

getObj("passwordInfo").innerHTML = inputTip[1]

getObj("passwordInfo").className = "error"

pwd1.focus()

return false

}

else

{

getObj("passwordInfo").innerHTML = ""

}

if( pwd2.value == "" )

{

getObj("repeatPasswordInfo").innerHTML = inputTip[1]

getObj("repeatPasswordInfo").className ="error"

pwd2.focus()

return false

}

else if( pwd2.value != pwd1.value )

{

getObj("repeatPasswordInfo").innerHTML = inputTip[2]

getObj("repeatPasswordInfo").className = "error"

return false

}

else

{

getObj("repeatPasswordInfo").innerHTML = ""

}

if( isEmail( eml.value ) == false )

{

getObj("emailInfo").innerHTML = inputTip[3]

getObj("emailInfo").className = "error"

eml.focus()

return false

}

else

{

getObj("email").innerHTML = ""

}

if( arguments[0] != undefined || arguments[0] != null || arguments[0] == 1 )

{

return true

}

else

{

return false

}

}

function init()

{

var obj = document.getElementsByTagName("input")

for( var i=0i<obj.lengthi++)

{

if( obj[i].type.toLowerCase() == "text" || obj[i].type.toLowerCase()=="password" )

{

obj[i].id = obj[i].getAttribute("name")

obj[i].onblur = chkfrm

}

if( obj[i].type.toLowerCase() == "reset" ) obj[i].onclick = forReset

}

}

function forReset()

{

var clearIDs = ["userInfo","passwordInfo","repeatPasswordInfo","emailInfo"]

for( var i=0i<clearIDs.lengthi++ )

{

getObj(clearIDs[i]).innerHTML = ""

}

}

function getObj( id )

{

return document.getElementById(id)

}

function isEmail( email )

{

var res = /^[a-z0-9]+[0-9a-z\_\-\.]*@([-a-z0-9]+\.[a-z]{2,5})+$/i.test( email )

return res

}

window.onload = init

</script>

</head>

<body>

<div style="height: 5em">

</div>

<form action="regeit.do" method="post" onsubmit="return chkfrm(1)"><!--这里有区别与obj[i].onblur,这里带参数,onblur不带参数,带参数的表单校验完成后要提交,不带参数校验完毕后不提交-->

<div align="center">

<table>

<tr>

<td>用户名：</td>

<td><input type="text" name="user"></td>

<td id="userInfo"></td>

</tr>

<tr>

<td>密码：</td>

<td><input type="password" name="password"></td>

<td id="passwordInfo"></td>

</tr>

<tr>

<td>重复密码：</td>

<td><input type="password" name="password1"></td>

<td id="repeatPasswordInfo"></td>

</tr>

<tr>

<td>邮箱：</td>

<td><input type="text" name="email" onchange="isEmail()" id="email"></td>

<td id="emailInfo"></td>

</tr>

<tr>

<td><input type="reset"></td>

<td><input type="submit" value="提交"></td>

</tr>

</table>

</div>

</form>

</body>

</html>

试一下，应该能满足你的要求

1,动态添加验证规则

// 添加

$("#addConnectUser").rules("add",{rules:{required:true,isString:true},messages:{required:"用户名为必填项",isString:"请输入规范字符"}})

// 移除

$("#addConnectUser").rules('remove','required')

在此我要讲一下为什么有一个isString验证规则；这个是为了限制表单中input的输入规则；比如:不允许特殊字符，或者一些特殊的要求；这个isString是自己配置的

jQuery.validator.addMethod("isString", function(value, element) {

return this.optional(element) || (inputTest.test(value))

},"请输入规范内容")

// 此处的inputTest为你自定义的验证规则

2,如何给已经添加了表单验证的选项移除验证规则

$("#addConnectUser").rules("remove",'required')

//再次添加可以直接用

$("#addConnectUser").rules("add",'required')