Unit01： HTML5表单元素、表单属性、表单验证

【HTML5新表单】

1.type:

- email ：

验证逻辑不完整，只验证是否包含 @ ；

- search ：

- url ：

验证逻辑不完整，只判断是否包含 http:// ；

- tel ：

电话号码类型:

只能在移动端有效果，会弹出数字键盘；只能输入数字；

pc端，可以输入英文；

- number :

数字类型：3个属性；

min:

max:

step: 默认值1；

- range ：

范围类型:

min：

max：

step：

value：当前值；

- color ：

颜色类型：取色器；

- date :

日期类型；

- week : 周

- month : 月

2.新表单元素

- datalist元素

定义备选项，与option

与input text搭配使用，input的list属性指向datalist的id；

特点：

数据与结构分离；预定义数据在datalist，结构input；

  <datalist id="mylist">
    <option>请选择</option>
    <option>北京</option>
    <option>南京</option>
    <option>天津</option>
  </datalist>
  <input type="text" list="mylist"><br>

- progress元素

进度条；

不同浏览器效果不同；2属性；

- max 没有min属性，最小默认为0；

- value 当前进度值；

<progress max="100" value="0" id="progress"></progress>
  <script>
    function mychange(){
        var progress = document.getElementById("progress");
        var value = progress.value;
        value++;
        progress.value = value;
        
        if(value == 100){
            clearTimeout(t);
        }
        
        t = setTimeout("mychange()",100);
    }
    mychange();
  </script>

- meter元素

刻度；

- min

- max

- value

- low 低预警值

- high 高预警值

- output元素

输出；

for属性

3.表单新属性

- placeholder属性：

类似于value； placeholder="请输入用户名";

默认文本是灰色，并且文本框获取焦点，输入时，默认文字自动消除；

- multiple属性：

允许文本框中输入多个值，用","隔开；

只定义属性名，没有属性值

- autofocus属性

自动获取焦点

只定义属性名，没有属性值

- form属性

值等于表单元素的id值；

允许表单元素定义在表单之外；

4.表单新验证

1.验证属性

- required :

验证为空；

提交时才提示；

- pattern ：

不要斜线；pattern="[a-z]{6,12}"

使用正则表达式验证元素值是否匹配；

验证不了空；

提交时才提示；

- min max

验证当前元素值的最小值和最大值；

适用于type=number类型

提交时才提示；

- minlength maxlength

验证当前元素值的最小长度和最大长度；

提示是英文的；

minlength:提交时才提示；不是H5的新属性；

maxlength:输入时长度就不能大于指定值；

- validity

表单验证在H5中提供一个有效状态；有效状态通过validityState对象获取到，

validityState对象可以通过validity属性得到；

2.验证(有效)状态

validityState对象提供一系列有效状态

***所有验证状态要配合验证属性使用；

- valid

元素所有"验证都通过"就返回true；

Elem.validity.valid;

以下验证返回true，都是验证错误；

- valueMissing

判断当前元素值是否为空。返回true false;

配合required使用；

Elem.validity.valueMissing;

- typeMismatch

判断当前元素是否匹配类型type；返回true false;

配合email，number，url使用；

email.validity.typeMismatch;

- patternMismatch

判断当前元素是否匹配正则表达式；返回true false;

配合pattern使用；

Elem.validity.patternMismatch;

- tooLong

判断当前元素是否匹配长度；返回true false;

配合maxlength；

**使用maxlength属性后，长度不会超出maxlength的值，tooLong很难出现这种情况；****逻辑完整性；

- rangeUnderflow

输入内容值小于min的值时，返回true；

只能匹配min 不能与max比较；

Elem.validity.rangeUnderflow;

- stepMismatch

判断当前元素值是否与step设置相同；

只能匹配step，不和min max比较；

Elem.validity.stepMismatch;

- customError

配合setCustomValidity()方法使用；只要用了此方法，customError就返回true；

setCustomValidity()：

作用：设置验证失败后的默认提示信息；

问题：一旦使用该方法修改默认提示信息后，即使输入正确，错误提示信息依旧出现；

解决：当输入正确时，调用该方法将信息设置为空"";

<!DOCTYPE html>
<html>
 <head>
  <title>表单验证状态(完整)</title>
  <meta charset="utf-8" />
 </head>

 <body>
  <form>
    用户名:<input type="text" id="user" required><br>
    email地址:<input type="email" id="email"><br>
    密码:<input type="text" id="pwd" pattern="^[a-zA-Z]{6,12}$"><br>
    确认密码:<input type="text" id="repwd" maxlength="10"><br>
    年龄:<input type="number" id="age" min="10" max="20"><br>
    成绩:<input type="number" id="score" min="60" max="100" step="10">
    <input type="submit" value="注册">
  </form>
  <script>
    var user = document.getElementById("user");
    user.onblur = function(){
        if(user.validity.valueMissing){
            console.log("用户名不能为空.");
        }
    }
    var email = document.getElementById("email");
    email.onblur = function(){
        if(email.validity.typeMismatch){
            console.log("email输入格式错误.");
        }
    }
    var pwd = document.getElementById("pwd");
    pwd.onblur = function(){
        if(pwd.validity.patternMismatch){
            console.log("密码输入错误.");
        }
    }
    var repwd = document.getElementById("repwd");
    repwd.onblur = function(){
        if(repwd.validity.tooLong){
            console.log("密码输入过长.");
        }
    }
    var age = document.getElementById("age");
    age.onblur = function(){
        if(age.validity.rangeUnderflow){
            console.log("年龄过小,不符合!");
        }
    }
    var score = document.getElementById("score");
    score.onblur = function(){
        if(score.validity.valid){
            console.log("成绩输入正确.");
        }else if(score.validity.stepMismatch){
            console.log("成绩输入不符.");
        }
    }
  </script>
 </body>
</html>

posted @ 2016-03-30 17:59 xiangcy 阅读(481) 评论(0) 收藏举报

刷新页面返回顶部

小橙子

Unit01： HTML5表单元素 、 表单属性 、 表单验证

Unit01： HTML5表单元素、表单属性、表单验证