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 ↩︎