JQuery实战——表单验证
框架：
- *{box-sizing：border-box}
- wrap{margin:xx auto;（使居中）max-width:1080px;(设max-width方便日后调整} 单独定义wrap-sm{width：400px;}
封装Validator：
- $(function){}相当于document.ready()：当加载完DOM之后再执行，注意不同js的执行顺序
- ‘use strict’:严格模式
+加了this的function就被暴露
window.Validator=function(val,rule){//大写代表构造器，构建一个对象
var value=parseFloat(val);//val是字符串传进来的，通过parseFloat变成浮点数
this.validate_max=function(){//在里面把所有对rule验证的函数进行封装
- jquery自带：
- $.isNumeric:验证是否是数字
- $.trim:去除两头的空格
- 正则表达式匹配模式：rule=“pattern:1*$|min:……” var reg=new RegExp(rule.pattern);return reg.test(val);
- 迭代：把validator的所有判断函数都包含在一个function：is_valid中，在is_valid中迭代
- .each(function(index,node){})
var key;
for(key in rule){
var r=this['validate_'+key]();
封装Input
- 参数为selector
- 函数内部有Init初始化，Init函数内判断selector是否已经是jquery的孩子：selector instanceof jQuery
- 把所有函数都放在Input的init函数中，应当在最后运行init！
- .data(‘rule’)选取名字为“data-”形式的属性、.split(’|’)分割rule
- rule[item_arr[0]]=JSON.parse(item_arr1)；
- JSON.parse：把字符串解析，且只能识别被双引号包裹的字符串
//JSON.parse()从一个字符串中解析出JSON对象
var str = '{"a":"1","b":"2"}';
JSON.parse(str);
//结果是：Object{a:"1",b:"2"}
- 得到一个jquery对象的值要用.val()
- this指向的对象在严格模式下会发生改变变成window，运行时会出现undefined：修改：在闭包内令**$me**=this，后面用me.xx
- 时刻监听：listen（）{blur事件}
错误信息选择显示：
- 选出所有有属性‘data-rule’的input并转化成jquery对象，得到name属性，由name属性加工得到相应的错误信息div的id，并转化成jquery对象，由此可以实现hide（），show（）
- 属性过滤选择器：$(’[data-rule]’);九大选择器
- 得到自定义属性的值的方法：.attr(‘xxx’)
- 给对应的input一个自定义属性name=‘age’，给每个错误信息一个id，命名为‘age-input-error’,可以直接通过$(’#’+$ele.name+’-input-error’)进行选择
- $(’#’+$ele.name+’-input-error’)还可以直接封装到一个函数中
表单提交
- 默认是会刷新页面，修改之后页面不会刷新，完全靠自己用trigger控制：
.on('submit',function(e){
e.preventDefault();
}
//触发所有input的blur事件,在submit时更新所有的input的值并且统一控制错误信息的显示与隐藏
$inputs.trigger("blur");
其他：
-
密码的input的type=“password”
-
button的type一定要填：button/submit
-
jQuery的$()内不仅能串字符串、jQuery对象。还能传原生的node对象
-
在用选择器时 不要忘了临时变量前面的$!!
-
each和for区别？
-
！== & ===
-
undefined不包括空值!
-
有相似的格式尽量把css样式写在一起
a-z0-9 ↩︎