1.什么是表单验证

大多数网站的注册页面中,都会要求用户输入生日,我们知道日期的格式是yyyy-MM-dd并且由数字组成,中间不允许出现字母或是其他符号,如果填写格式与日期格式不符合,name注册将失败,这种操作就是表单验证的体现。
表单验证就是js在数据被送往服务器前,对html表单中的数据进行验证的过程,在验证所有信息均符合要求之后,经表单提交到服务器由服务器进行数据处理。常见的表单验证有:表单中的必填项目、输入的邮件是否合法,输入日期是否合法等。

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 width="363" 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>

在这里插入图片描述
在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐