day6 表单2——增加错误提醒和手机号的正则式检测等

内容介绍

以下为表单的进一步学习内容，比起day4的简单检测，会根据输入的不合法给出更多相应的提醒。
包括以下几个部分：

1. HTML部分：

   • 定义了一个表单<form>，设置了提交目标路径和请求方法。
   • 包含了昵称、性别、密码、手机、爱好、自我介绍和国家等各种表单输入元素。
   • 使用了一些属性如maxlength、checked、cols、rows、selected等来设置表单元素的属性。

2. JavaScript部分：

   • 定义了一些函数checkusername()、checkphone()、checkpassword()和check()，用于表单验证和处理。
   • 这些函数通过获取表单元素的值、进行判断和验证，并根据验证结果设置相应的样式和内容。
   • 函数check()用于整体的表单验证，包括调用其他验证函数并对单选框的取值进行处理。

3. CSS部分：

   • 定义了一些样式规则，如.error和.success，用于设置错误和成功信息的样式。
   • 设置了表单的边框、宽度、高度和居中等样式。

代码实现较为简单，接下来展示一下内容的反馈功能：

按f12查看接收的信息

这个反馈的信息是什么呢？看以下的部分html代码：

<p>性别：
<input type="radio" value="male" name="sex" checked="checked">男
<input type="radio" value="female" name="sex">女
</p>
 <p>爱好：
 <input type="checkbox" name="like" value="足球" checked="checked">足球
 <input type="checkbox" name="like" value="篮球" checked="checked">篮球 
</p>

可以观察到，这里反馈的值是设置的value值。

正则式检测手机号是否真实

function checkphone() {
    var phone = document.getElementById("phone").value.trim();//去空格
    if (phone == "") {
        //alert("请输入内容")；
        document.getElementById("phone1").style.color = "red";
        document.getElementById("phone1").innerHTML = "手机号为空";
        //document.getElementById("phone1").style.color="red";
        //document.getElementById("phone1").style.fontSize="20px";
        document.getElementById("phone1").className = "error";
        return false;
    }
    else if (phone.length != 11) {
        document.getElementById("phone1").style.color = "red";
        document.getElementById("phone1").innerHTML = '长度不满足';
        document.getElementById("phone1").className = "error";
        return false;
    }
    var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
    if (myreg.test(phone)) {
        document.getElementById("phone1").style.color = "green";
        document.getElementById("phone1").innerHTML = "ok";
        document.getElementById("phone1").className = "success";
        return true;
    }
    else {
        document.getElementById("phone1").style.color = "red";
        document.getElementById("phone1").innerHTML = "手机号不真实";
        document.getElementById("phone1").className = "true";
        return false;
    }
}

在html文件里调用以上函数：

<p>手机：
<input type="text" maxlength="11" id="phone" onblur="checkphone()">
<span id="phone1">请输入手机号</span>
</p>

检查昵称和密码的代码照着以上代码写就行。如果想要规定昵称的前几位或某几位，可以参考day4的博客，这篇博客还包括了“屏蔽词”的检测。

day4 表单之检测账号密码及“屏蔽词”

多选框的设置代码

function check() {
    //单选框的取值
    var sex = "";//容器，存放性别
    var box = document.getElementsByName("sex");
    for (var i = 0; i < box.length; i++) {
        if (box[i].checked) {
            sex += box[i].value;
            break;
        }

    }
    console.log(sex);


    var like = "";//容器，存放性别
    var box1 = document.getElementsByName("like");
    for (var i = 0; i < box1.length; i++) {
        if (box1[i].checked) {
            like += box1[i].value + ",";

        }

    }
    console.log(like);


    if (checkphone() & checkpassword()) { return true; }
    else { return false; }
}