表单验证

Posted yzx-sir

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表单验证相关的知识，希望对你有一定的参考价值。

表单验证

1.当输入框失去焦点时，验证输入内容是否符合要求

2.当点击注册按钮时，判断所有输入框的内容是否都符合要求，如果不符合则阻止表单提交

 

案例1：某网站的注册页面，要求所有项目必须填写、密码长度必须大于6位、两次输入密码必须一致、年龄需要在15~100之间、邮件地址必须符合规则。

分析：
1.表单验证是使用哪个html事件完成？是选用按钮的onclick事件还是选用表单提交事假onsubmit事件？
onclick事件是控件的单击事件，onsubmit事件是表单的提交事件，应该用onsubmit事件
2.如何利用js代码获取单选框（标签名：rdnSex）中的性别？
单选框往往是以组的形式出现的，但是不能通过组名直接获得选中的值，而需要通过循环遍历数组中的所有元素，通过判断把选中的元素提取出来。关键代码如下：

for(var i = 0; i < document.form1.rdnSex.length; i++)
    if (document.form1.redSex[i].checked)
        sex = document.form1.redSex[i].value;

3.如何利用js验证表单中的邮件地址（标签名：txtEmail）的正确性？
邮件地址有独特的规则，邮件中需要有@和.出现，并且@必须在.之前出现。关、关键代码如下：

var email = document.form1.txtEmail.value;
if (email === "")
    alert("邮件地址不能为空!");
    return false;


var post1 = email.indexOf(\'@\');
var post2= email.indexOf(\'.\');
if (post1 == -1 || post2 == -1 || post2 < post1)
    alert("邮件地址格式错误！");
    return false;

4.采用什么办法验证年龄必须是数字？
js中的isNan方法专门用来判断字符串是否为非数字，如果字符串是非数字则返回true，否则为false。
关键代码如下：

var age = document.form1.txtAge.value;
if(age === "")
    alert("年龄不能为空~");
    return false;
else if(isNaN(age))
    alert("年龄必须由数字组成！");
    return false;
else if (!parseInt(age) > 15 && parseInt(age) <= 100)
    alert("年龄必须在15~100之间！");
    return false;

5.如何验证日期类型？
日期类型可以从格式上验证，按照yyyy-MM-dd构成，具体规则如下：
1字符串必须是10位，年4位，月和日各两位，如果月日不足两位则前方补0。
2字符串的第4位和第7位必须是-符号
3利用字符串方法split()方法，将字符串截成数组，分别保存年月日，利用循环遍历数组判断数组中的字符串是否为数字。
关键代码如下：

var birthday = document.form1.txtBirthday.value;
if(birthday.length != 10)
    alert("日期格式长度必须是10！");
    return false;
else if(birthday.charAt(4) != "-" || birthday.charAt(7) != "-")
    alert("日期的格式不对！")；
    return false;
else
    var date = birthday.split("-");
    for (var i = 0; i < date.length; i++)
        if (isNaN(date[i]))
            alert("日期需要用数字！");
            return false;

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script type="text/javascript">
        function check() 
            var name = document.form1.txtName.value;
            var pwd = document.form1.txtPwd.value;
            var rePwd = document.form1.txtRePwd.value;

            if (name === "" || pwd === "" || rePwd === "")
                alert("用户名密码不能为空");
                return false;
            

            if (pwd.length < 6)
                alert("密码长度少于6位");
                return false;
            else if(rePwd != pwd)
                alert("两次输入的密码不一致");
                return false;
            

            var birthday = document.form1.txtBirthday.value;
            if(birthday.length != 10)
                alert("日期格式长度必须是10！");
                return false;
            else if(birthday.charAt(4) != "-" || birthday.charAt(7) != "-")
                alert("日期的格式不对！");
                return false;
            else
                var date = birthday.split("-");
                for (var i = 0; i < date.length; i++)
                    if (isNaN(date[i]))
                        alert("日期需要用数字！");
                        return false;
                    
                
            
            var email = document.form1.txtEmail.value;
            if (email === "")
                alert("邮件地址不能为空!");
                return false;
            

            var post1 = email.indexOf(\'@\');
            var post2= email.indexOf(\'.\');
            if (post1 == -1 || post2 == -1 || post2 < post1)
                alert("邮件地址格式错误！");
                return false;
            
            var age = document.form1.txtAge.value;
            if(age === "")
                alert("年龄不能为空~");
                return false;
            else if(isNaN(age))
                alert("年龄必须由数字组成！");
                return false;
            else if (!parseInt(age) > 15 && parseInt(age) <= 100)
                alert("年龄必须在15~100之间！");
                return false;
            
            var sex;
            for(var i = 0; i < document.form1.rdnSex.length; i++)
                if (document.form1.redSex[i].checked)
                    sex = document.form1.redSex[i].value;
                
            


        

    </script>
</head>
<body>
<form onsubmit="return check();" name = "form1" method="post" action="">
    <table  border="1" cellpadding="1">
        <tr>
            <td>用户名：</td>
            <td><input type="text" name="txtName" id="txtName"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" name="txtPwd" id="txtPwd"></td>
        </tr>
        <tr>
            <td>新密码：</td>
            <td><input type="password" name="txtRePwd" id="txtRePwd"></td>
        </tr>
        <tr>
            <td>生日：</td>
            <td><input type="text" name="txtBirthday" id="txtBirthday"></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td><input type="radio" name="rdnSex" id="radio"value="男">男
            <input type="radio" name="rdnSex" id="radio2"value="女">女</td>
        </tr>
        <tr>
            <td>年龄：</td>
            <td><input type="text" name="txtAge" id="txtAge"></td>
        </tr>
        <tr>
            <td>邮箱地址：</td>
            <td><input type="text" name="txtEmail" id="txtEmail"></td>
        </tr>
        <tr>
        <td></td>
        <td><input type="submit" name="btnSubmit" id = "btnSubmit" value="确定"></td>
        </tr>
    </table>
</form>
</body>
</html>

 

表单验证问题

ASP的CreateUserWizard控件验证的时候 要求的密码也太 烦锁了 有没有半法 让它接受 任合密码 但是 必须6位以上

参考技术A 我记得在webconfig文件里面可以设置.
其实2005自还的注册这些控件是很少用到的.修改起来很不方便.

以上是关于表单验证的主要内容，如果未能解决你的问题，请参考以下文章

Jquery验证只能验证表单吗，能验证表单里指定的DIV吗

Java 表单验证

自定义表单身份验证的表单身份验证续订问题

引导表单验证 - 使用点击事件验证表单

struts2 表单验证问题

vant中表单验证