zoukankan      html  css  js  c++  java
  • JavaScript高级程序设计55.pdf

    输入模式

    HTML5为文本字段新增了pattern属性,这个属性的值是一个正则表达式,用于匹配文本框中的值

    例如,只想在允许在文本字段中输入数值

    <input type="text" pattern="d+" name="count">

    注意,模式的开头和结尾不用加^和$符号(假定已经有了),这两个符号表示输入的值必须从头到尾与模式匹配

    与其他输入类型相似,指定的pattern也不能阻止用户输入无效的文本,。这个模式应用给值,浏览器来判断值是否有效,在Javascript中可以通过pattern属性访问模式

    var pattern=document.forms[0].elements["count"].pattern;

    检测浏览器是否支持pattern属性

    var isPatternSupported="pattern" in document.createElement("input");

    检测有效性

    checkValidity()方法可以检测表单中某个字段是否有效,检测的依据是之前介绍过的那些约束

    if(document.forms[0].element[0].checkValidity()){

      //字段有效时执行的代码

      }else{

      //字段无效时执行的代码

      }

    checkValidity()反馈字段是否有效,而validity对象反馈字段的有效或无效原因,其包含一系列属性,每个属性返回一个布尔值

    customError:如果设置了setCustomValidity(),则为true,否则返回false

    patternMismatch:如果值与指定的pattern属性不匹配,返回true

    rangeOverflow:如果值比max大,返回true

    rangeUnderflow:如果值比min小,返回true

    stepMisMatch:如果min和max之间的步长值设置不合理,返回true

    toolong:如果值得长度超过了maxlength属性指定的长度,返回true,有的浏览器(Firefox4)会自动约束字符数量,因此这个值永远都返回false

    typeMismatch:如果值不是“mail”或“url”,返回true

    valid:如果这里的其他属性都是false,返回true

    valueMissing:如果标注为required的字段没有值,返回true

    if(input.validity && !input.validity.valid){

        if(input.validity.valueMissing){

            //执行一段代码

          }

      }

    禁用验证

    设置novalidate属性,告诉表单不进行验证

    <form method="post" action="signup.php" novalidate>

      <!--插入表单元素-->

    </form>

    如果一个表单中有多个提交按钮,指定某个提交按钮不必验证表单,可以在相应的按钮上添加formnovalidate属性

    <input type="submit" formnovalidate name="btnNoValidate">

    选择框脚本

    选择框通过<select>和<option>元素创建,除了所有表单字段共有的属性和方法外,HTMLSelectElement类型还提供了下列属性和方法

    add(newOption,relOption):向控件中添加新的<option>元素,其位置在(relOption)之前

    multiple:布尔值,表示是否允许多项选择;等价于HTML中的multiple特性

    options:控件中所有<option>元素的HTMLCollection

    remove(index):移除给定位置的选项

    selectedIndex:基于0的选中项的索引,如果没有选中项,则值为-1,对于支持多选的控件,只保存选中项中第一项的索引

    size:选择框中可见的行数;等价于HTML中size特性

    选择框的type属性不是“select-one”就是“select-multiple”,取决于HTML代码中有没有multiple特性。

    选择框的value属性由当前选中项决定的:

    没有选中项,value保存空字符串

    有一个选中项,该项的value特性已经在HTML中指定,选择框的value属性等于该选中项的value特性

    有一个选中项,该项的value特性未在HTML中指定,选择框的value属性等于该选中项的文本

    如果有多个选中项,选择框的value属性依据前两条的规则取得第一个选中项的值

    在DOM中,每个<option>元素都有一个HTMLOptionElement对象表示,具有下列属性

    index:当前选项在options集合中的索引

    label:当前选项的标签;等价于HTML中label特性

    selected:布尔值,表示当前选项是否被选中,设置为true可以选中当前选项

    text:选项的文本

    value:选项的值(等价于HTML中的value特性)

    还要注意的一点是:选择框的change事件与其他表单字段的change事件触发条件不一样,其他表单字段在值被修改且焦点离开当前字段时触发,而选择框只要选中了选项就会触发

    不同浏览器下,选项的value属性返回的值也存在差别,在所有浏览器中,value属性始终等于value特性,未指定value特性的情况下,IE8返回空字符串,其他现代浏览器返回与text特性相同的值

  • 相关阅读:
    vue中常用的属性标签
    Vue 基本简介
    ES6 Map 和 WeakMap
    ES6 set/weakset
    ES6 generator生成器函数 async
    ES6 promise对象
    信息论-熵-随机变量-泛函
    机器学习一
    RS-232接口
    图的存储结构
  • 原文地址:https://www.cnblogs.com/sdgjytu/p/3793788.html
Copyright © 2011-2022 走看看