js小练习（三）：表单操作

（一）主要功能：

（1）限制用户名和密码的格式：

包括限制长度，只能是数字和字母,不能为空等等，这部分主要通过正则表达式和onblur事件来筛选判断。

（2）两次密码的验证：

判断两次的value值是否一致，同样是使用到了onblur事件。

（3）单选框：

radio类型，name值相同，js取值的时候不能用document.getElementById(“xxx”)，而要使用document.all(“xxx”),取值使用数组和checked来判断，事件的话我选择的onclick，用onblur偶尔会有小bug。

（4）复选框：

checkbox类型，基本思想同单选框。需要注意的是复选框的全选和全部反选的功能，核心是该框的状态和所有选项框的checked一致。

（5）下拉列表：

这个没啥好说的，select和option，事件选择onchange。

（6）textarea部分：

事件的话我使用的是onkeyup，在键盘松开时判断，主要是用来字数计数。

（二）代码实现：

（1）html部分：

<form action="success.html" method="post" class="message">
    <!--表单提交成功后跳转页面，考虑到安全性，method建议使用post-->
    
    <div class="title">
        简易表单
    </div>
    
    <div class="main">
        <!--用户名-->
        <div>
            用户名：
            <input type="text" id="id" name="id" onblur="GetId(this.value)" />
            <span id="idMsg"> 用户名由5~20位的字母、数字组成！</span>
        </div>

        <!--密码-->
        <div>
            密&nbsp;&nbsp;&nbsp;码：
            <input type="password" id="password" name="password" onblur="vertify(this.value)" />
            <span id="passwordMsg"> 请输入密码，密码由5~20位的字母、数字组成！</span>
        </div>

        <!--确认密码-->
        <div>
            确认密码：
            <input type="password" id="confpassword" name="confpassword" onblur="vertifypwd(this.value)" />
            <span id="confpassMsg">请确保两次密码输入一致！</span>
        </div>

        <!--性别-->
        <div>
            性别：
            <input type="radio" value="男" name="sex" onclick="getSex(this.value)" />男
            <input type="radio" value="女" name="sex" onclick="getSex(this.value)" />女
            <span id="sexMsg"></span>
        </div>

        <!--技术-->
        <div>
            技术：
            <input type="checkbox" value="java" name="inset" onblur="getLike(this.value)" />java
            <input type="checkbox" value="C++" name="inset" onblur="getLike(this.value)" />C++
            <input type="checkbox" value="PHP" name="inset" onblur="getLike(this.value)" />PHP
            <input type="checkbox" value="C#" name="inset" onblur="getLike(this.value)" />C#
            &nbsp;&nbsp;&nbsp;全选：<input type="checkbox" id="selectAll" name="selectAll" onclick="Select()" />
        </div>

        <!--学历-->
        <div>
            请选择你的学历：
            <select id="Education" onchange="getEducation(this.value)">
                <option value="大学">大学</option>
                <option value="研究生">研究生</option>
                <option value="博士">博士</option>
                <option value="高中">高中</option>
                <option value="初中">初中</option>
            </select>
            <span id="educationMsg"></span>
        </div>

        <!--自我评价-->
        <div>
            请说说你对自己的评价：
            <textarea id="note" name="note" onkeyup="checkLength(this.value)">

        </textarea>
            <span id="noteMsg"></span>
        </div>
    </div>

    <!--提交表单-->
    <div class="submit">
        <input type="submit" value="提交表单" />
    </div>


</form>

（2）js部分：

function GetId(id) {/验证用户名格式/ 
var UserMsg = document.getElementById("idMsg")
if (password != "" && (/^\w{5,20}$/.test(id)) {
    UserMsg.innerHTML = "<font color = \"green\">用户名输入正确！</font>";

} else {
    UserMsg.innerHTML = "<font color = \"red\">用户名输入格式错误!</font>";

}

} 

function vertify(password) {//验证密码格式 
var pwdMsg = document.getElementById("passwordMsg");
if (password != "" && (/^\w{5,20}$/.test(password))) {
    pwdMsg.innerHTML = "<font color=\"green\">密码格式输入正确！</font>";

} else {
    pwdMsg.innerHTML = "<font color=\"red\">密码格式不正确！</font>"

}

} 

function vertifypwd(confpassword) {//验证两次密码是否一致 
var confpwdMsg = document.getElementById("confpassMsg");
if (confpassword == document.getElementById("password").value) {
    confpwdMsg.innerHTML = "<font color=\"green\">两次密码输入一致！</font>";

} else {
    confpwdMsg.innerHTML = "<font color=\"red\">两次密码输入不一致！</font>";

}

} 

function getSex() {//单选框 
var sex = document.all("sex");
for (var x = 0; x <= sex.length; x++) {
    if (sex[x].checked) {
        document.getElementById("sexMsg").innerHTML = "您的性别是：" + sex[x].value;
    }
}

} 

function getLike() {//复选框 
var info = "您所掌握的技术有：";
var instLike = document.all("inset");
for (var x = 0; x < instLike.length; x++) {
    if (instLike[x].checked) {
        info += instLike[x].value + "";
    }
}

} 

function Select() {//复选框全选、反选 
var instAll = document.all("inset");
if (instAll.length == undefined) {//如果只有单个元素，使用all之后，alert(instAll.length),显示为undefined。原理暂时还没弄明白，但是如果不加上这段处理，复选框如果只有一个元素，全选或者全部反选会失效。
    instAll.checked = document.getElementById("selectAll").checked;
} else {
    for (var x = 0; x < instAll.length; x++) {
        instAll[x].checked = document.getElementById("selectAll").checked;//反选和全选核心在于将待选择的选项状态设置的和全选/全反选的状态一致
    }
}

} 

function getEducation(value) {//下拉列表 
/*document.getElementById("Education").length = 0;*/ //清空下拉列表
document.getElementById("educationMsg").innerHTML = "您的学历是：" + value;

} 

function checkLength(note) {//字数统计 
var len = note.length;
var max = 20;
document.getElementById("noteMsg").innerHTML = "您现在的字数是:" + len + "，请勿超出20字";
if (len > max) {
    document.getElementById("noteMsg").innerHTML = "您现在的字数是：" + len + ",已超出字数！";
}

} 

（三）运行结果：

（四）总结：

没有连数据库，只是简单的梳理了一下表单方面的知识，其实提交那里应该再写一个简单的函数判断一下表单是否填完的。