网页表单上添加JS验证码

JavaScript011

网页表单上添加JS验证码,第1张

<script>

function chk(){

....

}

</script>

<form action="result.asp" method="post" onSubmit="return chk()">

...

</form>

chk()函数为验证函数,当符合提交条件时return true;当不符合时return false

form表单的数据先由js判断处理,通过后再提交数据到后台。

1、js获取表单数据,根据实际情况判断是否符合规则。一般的判断是否为空,是否含有不安全字符,有就过滤掉(这一步也可以在后台处理)。

2、对于未通过的输入,向用户返回信息提示。

3、验证通过,提交数据到后台。

4、根据实际需求做处理.....

下面是一个简单的例子:

<form id="loginForm" action="" method="post">

    用户名: <input id="username" name="username" type="text" maxlength="16" />

    <br />

    <input id="go" type="button" value="提交" />

</form>

<script>

    var loginForm = document.getElementById('loginForm')

    var go = document.getElementById('go')

    go.onclick = function(){

        var username = loginForm.username.value

        //这里判断了用户名的输入不能为空,且长度为6-16位

        if(username && (typeof(username)!='undefined') && (username!=0) && (username.length>=6) && (username.length<=16)){

            //验证通过,提交表单数据

            loginForm.submit()

        }else{

            alert('输入不符合规则')

        }

    }

</script>

通常要先在前端对数据做处理得情况下,并不是用<input type="submit" />按钮,而是用<input type="button" />按钮,因为要先对数据进行处理再提交到后台;对于数据的判断验证,大多是使用正则表达式来判断的,虽然比较麻烦,不过如今浏览器对html5的兼容则省掉不少麻烦,新增的 input 类型可以满足一般的需求。