JavaScript10 表单处理

1 获取表单元素

例如下面的表单元素，想要获取姓名和年龄。

<form name="form1">
    姓名:
    <input id="name" type="text" name="name"><br/>
    年龄:
    <input id="age" type="text" name="age">
    <input type="button" value="提交1" onclick="getInfoByForm()">
    <input type="button" value="提交2" onclick="getInfoById()">
</form>

1.1 DOM通过id获取

1.id是html文档里唯一表示的属性，元素只要有这个属性，那么这个属性就是唯一的。
document.getElementById(id名)。
2.通过id获取表单元素，同理还可以通过class，tag获取表单元素。

        function getInfoById() {
            var name=document.getElementById("name").value;
            var age=document.getElementById("age").value;
            alert(name+" "+age);
        }

1.2 DOM通过表单name获取

1.name是html文档里表示表单和表单元素的属性。如果一个form标签有name属性，那么这个属性就是应该唯一的。如果多个表单元素有name属性，表示这些元素是一组表达元素，例如radio元素中通过name表示这是一组单选按钮。
document.forms[表单name]获取整个表单
document.forms[表单name][表单元素名]获取表单的某个或者几个元素。

2.通过name获取表单元素。

        function getInfoByForm(){
            var name=document.forms["form1"]["name"].value;
            var age=document.forms["form1"]["age"].value;
            alert(name+" "+age);
        }

2 手动进行表单验证

基本思路都是获取表单的元素进行字符串匹配。

1.验证数字输入，要求输入的是位数大于4的数字
例如在下面的表单里用两种方式验证

form name="form1">
    <input name="num" type="text">
    <input type="button" value="正则表达式验证" onclick="regCheck(document.forms['form1']['num'].value)">
    <input type="button" value="字符串验证" onclick="strCheck(document.forms['form1']['num'].value)">

（1）正则表达式验证
<1>正则表达式对象构造。
<2>正则表达式的test函数返回匹配成功还是失败。

        function regCheck(str) {
            var reg=new RegExp("^\\d{5}\\d*$");//正则表达式
            if(reg.test(str))
                alert("输入正确");
            else
                alert("输入错误");
        }

（2）字符串字符遍历验证，逐个字符判断类型，然后判断长度是否符合要求

        function strCheck(str) {
            for(var i=0;i<str.length;i++){
                if(isNaN(str[i])) {//如果是错误
                    alert("输入错误，应该输入数字");
                    return;
                }
            }
            if(str.length<5)
                alert("输入错误，数字长度应该大于4");
            else
                alert("输入正确");
        }

（3）两种验证方式的优缺点：
<1>正则表达式简单，但是只能返回成功或失败，不能明确指出哪里失败。
<2>字符串逐个字符遍历验证，逻辑比较麻烦，但是可以明确指出哪里失败
2.验证邮箱
（1）正则表达式验证，推荐。可以用工具生成更加准确的正则表达式。
注意在这里.不是通配符，而是用作匹配.这个字符，因此要加两个斜杠。

        function regCheck(str) {
            var reg=new RegExp("^\\w*@\\w*\\.\\w");//正则表达式
            if(reg.test(str))
                alert("输入正确");
            else
                alert("输入错误");
        }

（2）字符串验证，不推荐，太麻烦了，逻辑处理不好。

        function strCheck(str) {
            //邮箱里肯定要有一个@和一个.
            // 并且@在.之前，两者之间必须要有至少一个字符
            //@之前必须要有字符 .之后必须要有至少两个字符
            //所有除了@和.以外的字符，必须是是字母或者数字
            var atpos=str.indexOf("@");//如果有则返回索引，否则返回-1。返回第一次出现的索引
            var dotpos=str.indexOf(".");
            if(atpos!=-1&&dotpos!=-1&&
                    atpos+1<dotpos&&
                    atpos>0&&dotpos+2<=str.length+1
            ){
                alert("输入正确");
                return;
            }
            alert("输入错误")
        }
        

3 自动进行表单验证

首先可以通过设置属性来设置表单元素的约束条件
可以通过菜鸟教程学习各种约束属性
https://www.runoob.com/html/html5-form-attributes.html
这里列出了一些简单常用的约束

属性	描述
disabled	规定输入的元素不可用
max	规定输入元素的最大值
min	规定输入元素的最小值
pattern	规定输入元素值的模式
required	规定输入元素字段是必需的
type	规定输入元素的类型

3.1 提交按钮验证

1.实践
（1）设置表单元素的属性
（2）每次点击提交按钮时，都会自动检查这些属性是否按照约束条件设置。
都会从前到后检查输入的值是否符合条件。

<form>
    <input type="input" required>
    <!--必须要有值-->
    <input type="input" type="email">
    <!--必须输入邮箱-->
    <input type="input" pattern="\w">
    <!--输入正则表达式对应的-->
    <input type="input" pattern=disabled>
    <!--不能填入值-->
    <input type="number" max="20">
    <!--最大值为20-->
    <input type="number" min="0">
    <!--最小值为0-->
    <input type="submit">
</form>

3.2 任意的按钮验证

1.submit按钮在一个form里会触发表单的一些特殊功能，如果我们希望只是为了检查某些输入是否合法，不应该直接点击submit按钮。应该重新设置要按钮，用来检查输入的值是否合法。
2.表单对象关于验证的常用技术
（1）判断表单元素的内容是否符合约束

Property	Description
checkValidity()	如果 input 元素中的数据是合法的返回 true，否则返回 false。
setCustomValidity()	设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。使用 setCustomValidity设置 了自定义提示后，validity.customError 就会变成true，则 checkValidity总是会返回false。如果要重新判断需要取消自定义提示，方式如下：setCustomValidity(’’) setCustomValidity(null) setCustomValidity(undefined)

（2）表单元素的一些属性 这些属性都是只读属性，不可设置

属性	描述
validity	一个包含了各种错误的对象
validationMessage	浏览器错误提示信息
willValidate	指定 input 是否需要验证属性

（3）表单元素 validity也是一个对象，他又一系列属性值。

属性	描述
customError	设置为 true, 如果设置了自定义的 validity 信息。
patternMismatch	设置为 true, 如果元素的值不匹配它的模式属性。
rangeOverflow	设置为 true, 如果元素的值大于设置的最大值。
rangeUnderflow	设置为 true, 如果元素的值小于它的最小值。
stepMismatch	设置为 true, 如果元素的值不是按照规定的 step 属性设置。
tooLong	设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。
typeMismatch	设置为 true, 如果元素的值不是预期相匹配的类型。
valueMissing	设置为 true，如果元素 (required 属性) 没有值。
valid	设置为 true，如果元素的值是合法的。

3.实践，修改错误消息，并且查看验证状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function changeMessage() {
            var name=document.forms["form1"]["name"];
            name.setCustomValidity("输入你正确的名字");
            alert("此时的提示信息已经成功修改成:"+name.validationMessage)
        }
        function checkState() {
            var name=document.forms["form1"]["name"];
            alert(
                "待检测状态:"+name.willValidate+"\n"+
                "错误提示信息:"+name.validationMessage+"\n"+
                "错误状态对象"+name.validity+"\n"+
                "required属性状态"+name.validity.valueMissing
            );
        }
    </script>
</head>
<body>
<form name="form1">
    <input type="text"  name="name" required>
    <input type="submit">
    <input type="button"  value="修改提示信息" onclick="changeMessage()">
    <input type="button"  value="检查状态" onclick="checkState()">

</form>
</body>
</html>