今天完成的事情：
TODO LIST
一、【11：30】
了解validate验证（进行中）
二、【15：30】
复习HTML标签(进行中)
复习CSS语法（进行中）
元素选择器，类选择器，ID选择器
伪类和伪元素选择器
三、【20：30】后
整理一天所学知识点
跑步半个小时
明天计划的事情：
遇到的问题：
无
收获：
了解到如何用纯JS来写表单验证
HTML
<form>
<div class="input_wrap">
<label>用户</label>
<input
name="age"
id="test"
type="text"
data-rule = "max:10|min:2">
<div id="feizao" class="input_error">必须填写</div>
</div>
<div class="input_wrap">
<label for="">密码</label>
<input type="text" data-rule = "max:10|min:6|maxlength:18|minlength:6">
<div class="input_error">必须填写</div>
</div>
</form>
主要是通过 data-rule来进行判断 然后通过 ID 也就是DOM节点来进行事实判断
验证JS
// validate
// validator 验证器验证
// valid 验证通过
// invalid 验证未通过
//首先先进行个严格模式，也就use strict
$(function(){
"use strict";
//通过 window.Validator来曝光让程序能运行这里面的函数，
window.Validator = function(val,rule){
//如果不是必填项用户未填写任何内容则直接判定为合法
//循环里面的方法
this.is_valid=function(new_val){
var key;
val = new_val || val;
if(!rule.required && !val) {
return true;
}
for(key in rule){
// 防止重复检测
if(key === 'required'){
continue;
}
// 调用rule中相对应的测试方法
var r = this['validate_'+key]();
if(!r) {
return false;
}
}
return true;
}
// 验证方法，然后是通过 this.validate_max 来进行验证，这里的验证指向是 HTML里面的 管道 data-rule 里面的
//注意 需要在传递数据需要进行转换， 我转换的公式通过 函数进行封装了。 pre_max_min() 这是封装够里面代码其实 是
function pre_max_min(){
val = parseFloat(val);
}
this.validate_max = function(){
pre_max_min();
return val <= rule.max
}
this.validate_min = function(){
pre_max_min();
return val >= rule.min
}
//验证字符串
this.validate_maxlength = function(){
pre_length();//这个验证需要把输入的值转换成字符串
return val.length <= rule.maxlength
}
this.validate_minlength = function(){
pre_length();//这个验证需要把输入的值转换成字符串
return val.length >= rule.minlength
}
// 验证必填项
this.validate_required = function(){
var real = $.trim(val)
if(!real&&real!==0){
return false;
}
return true;
}
//正侧表达式
this.validate_pattern = function(){
var reg = new RegExp(rule.pattern);
return reg.test(val);
}
// 用于max 或min
function pre_max_min(){
val = parseFloat(val);
}
// 用于max 或min
function pre_length(){
val = val.toString();
}
};
})
然后在通过 输入框进行关联
$(function () {
"use strict"
window.Input = function (selector) {
//function里面要传递选择器来选择验证模块
var $ele,
rule = {
required:true
},
me = this;
this.load_validator = function () {
var val = this.get_val();
this.validator = new Validator(val, rule);
}
this.get_val = function(){
return $ele.val();
}
//获取Validator模块里吗的验证
function init() {
find_ele();
parse_rule();
me.load_validator();
//实时验证输入框
listen();
}
function listen(){
// blur 这个方法就是当鼠标点击其他地方开始运行这个函数
$ele.on('blur',function(){
var valid = me.validator.is_valid(me.get_val());
if(valid){
$('#feizao').hide();
}else{
$('#feizao').show();
}
console.log(valid)
})
}
function find_ele() {
if (selector instanceof jQuery) {
$ele = selector;
} else {
$ele = $(selector);
}
}
//这里需要解析管道，因为管道里面的都是数组但是药进行判断的或要转变成对象。
function parse_rule() {
var i;
var rule_str = $ele.data('rule');
if (!rule_str) {
return;
}
//把管道转换成对象解析规则
var rule_arr = rule_str.split('|');
for ( i = 0; i < rule_arr.length; i++) {
var item_str = rule_arr[i]
//把|转换成：
var item_arr = item_str.split(':')
// 主要把['min:18']转换成['min','18']
max
rule[item_arr[0]] = JSON.parse(item_arr[1])
//这地方item_arr[0]其实就是min 后面的item_arr[1]其实就是18最后的获得的值就是
// {min:18}
}
}
init();
}
})
然后呢在通过输出
var test = new Input('#test');
var valid=test.validator.is_valid();
console.log(valid)
这样验证就写完了
返回列表
评论