表单验证：同表单，两种规则，一种用于验证类型，不通过不可保存，一种用于警告数值是否超出正常值，警告值可保存

1. 结合我们现在项目：

先用了nice validator 用于验证表单数值是否按要求填写，验证不通过不允许提交；

但我们还有一个新需求，就是当填写数值超过正常值范围，要发生警告，即样式发生改变，或显示报警图片，便于客户使用监测指标，警告数值可保存。

2. 现在有两种思路，

    一是改nice validator 源码，弄一套自己使用的规则，直接加在input上；

    二 是，在input上自定义属性，按照规则写好警告范围，再加一个input内容改变触发事件，写一个通用js;

首先实现一下第二种思路：

 1>.内容改变触发事件,以下选择合适的场景进行应用：

1. onchange

 

onchange 事件会在域的内容改变时触发。支持的标签<input type="text">, <textarea>, <select>,<keygen>。

注意：在元素的值改变了且失去焦点时触发（两次的值一样不会触发）。

缺陷：通过js代码改变DOM的值不会触发，解决在js代码里改值了调用其change 的 function() 或者调.change()方法。

JS： 

<input type="text" id="cc" οnchange="function()">

JQuery:

$("#cc").change(function(){});

2. onpropertychange

 

onpropertychange会实时触发，会在元素的属性改变时就触发事件。当元素disable=true时不会触发。

缺陷：只在IE 下支持，其他浏览器不支持，用oninput来解决。

JS： 

<input type="text" id="cc" onpropertychange="functionName()">

 

3. oninput

 

oninput在<input>或<textarea>的值发生改变时触发，不需要等到元素失去焦点，是实时的。它是HTML5的事件，可用于检测文本类输入框的值。

缺陷：从脚本中修改值不会触发事件。从浏览器下拉提示框里选取值时不会触发。IE9 以下不支持，所以IE9以下可用onpropertychange 事件代替。

JS：

<input type="text" οninput="functionName()">

JQuery: 

$("#cc").on('input propertychange',functionName);

 

2>jq获取自定义属性

jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()

$("form").attr("check"); $("form").prop("check"); 两种都可以，不过新版jquery推荐第二种，两个在其他方面都差不多，我发现的唯一不同就是在checkbox上的时候，需要用prop，不然IE浏览器会不兼容 

jquery属性值选择器

$("[attribute|='value']")
选择指定属性值等于给定字符串或改字符串为前缀（该字符串后跟一个连字符“-”）的元素。
attribute: 一个属性名
value: 一个属性值

$(function(){

    $('a[hreflang|="en"]').css("border","2px solid red");
        //查找hreflang属性值是英语的所有链接。
});

$("[attribute*='value']")
选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素）
attribute: 一个属性名
value: 一个属性值，可以是一个不带引号的一个单词，或一个带引号的字符串。

$(function(){
    $('input[name*="man"]').css("border","2px solid red");
        //查找所有 input 的 name 属性中带有 'man' 的元素，并添加边框
});

$("[attribute~='value']")
选着指定属性用空格分隔的值中包含一个给定的元素。
attribute: 一个属性名
value: 一个属性值，可以是一个不带引号的一个单词，或一个带引号的字符串。

$(function(){

    $('input[name~="man"]').css("border","2px solid red");
        //查找所有属性中含有 'man' 这个单词的文本框，并且修改其文本值。
})

$("[attribute$='value']")
选择指定属性是以给定元素结尾的元素。这个元素比较是区分大小写的。
attribute: 一个属性名
value: 一个属性值，可以是一个不带引号的一个单词，或一个带引号的字符串。

$(function(){
    $('input[name$="letter"]').css("border","2px solid red");
            //查找所有的属性名称以"letter"的结束，并把他们的文字输入。
})

$("[attribute='value']")
选择指定属性是给定值的元素。
attribute: 一个属性名。
value: 一个属性值，可以是一个不带引号的一个单词，或一个带引号的字符串。

$(function(){
    $('input[value="Hot Fuzz"]').next().text("Hot Fuzz");
        //查找input 中 value 值等于 Hot Fuzz 的将其后面的元素添加文本。
})

$("[attribute!='value']")
选择指定属性不等于这个值的元素
attribute:一个属性名
value: 一个属性值，可以是一个不带引号的一个单词，或一个带引号的字符串。

$(function(){
    $('input[name!="newsletter"]').next().append("<b>；not newsletter</b>")
            //查找input 中name 不等于 newletter 的下一个元素追加 文本。
                注：主要含有这个字符串就行。
})

$("[attribute^='value']")
选择指定属性就是以给定字符串开始的元素。
attribute:一个属性名
value: 一个属性值，可以是一个不带引号的一个单词，或一个带引号的字符串。

$(function(){
    $('input[name^="news"]').val("news here!");
    //查找input 中 name 中含有new 这个字符串的 添加value 值。
})

$("[attribute]")
选择所有具有指定属性的元素，该属性可以是任何值。
attribute: 一个属性名。

$(function(){
    $('div[id]').css("color","red")
            //给绑定id属性的div的文本颜色变成红色。
})

$("[attributeFilter1][attributeFilter2]attributeFilter3")
选择匹配所有指定的属性筛选器的元素
attributeFilter1: 一个属性过滤器
attributeFilter2：另一个属性过滤器，用于进一步减少被选择的元素。
attributeFilterN： 根据需要有更多的属性过滤器。

$(function(){
    $('input[id][name$="man"]').val('only this one')
    //查找那些有id属性，并且name 属性以man结尾的输入框，并设置值。
})