应用javascript设计者模式之策略模式-->表单验证 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery.min.js"></script>
	<script>
　　　　
var verifydata={
    // 自定义弹窗
    popinit:function(news){
        var pops=$("<div>");
        pops.css({
            position:"fixed",top:"40%",left:"50%",padding:"10px 15px","background-color":"rgba(0,0,0,0.6)","text-align":"center","color":"#fff",
            "margin-left":"-25%","z-index":"100","font-family":"微软雅黑","max-width":"640px"
        });
        pops.attr('id','pops').html(news);
        $("body").append(pops);
        setTimeout(function(){$('#pops').fadeOut(1000);setTimeout(function(){$('#pops').remove();},800)},1000);
    },
    // 所有可以的验证规则处理类存放的地方，后面会单独定义
    types: {},
    // 验证类型所对应的错误消息
    messages: [],
    // 当然需要使用的验证类型
    config: {},
    // 暴露的公开验证方法
    passwordMessage:{},
    // 传入的参数是 key => value对
    validate:function(data){
         var i, msg, type, checker, result_ok;
        // 清空所有的错误信息
        this.messages = [];
        this.passwordMessage=[];
        for(i in data){
            type = this.config[i];  // 根据key查询是否有存在的验证规则
            checker = this.types[type]; // 获取验证规则的验证类
            if (!type) {
                this.popinit("验证规则不存在");
                return false;
            }
            if(!checker){
                this.popinit("验证规则类不存在，抛出异常");
                return false;
            }
            if(i=="password" || i== "confirm_password"){
                this.passwordMessage[i]=(data[i]);
            }
            if(type=="isNonEmptyIsIdentical"){
                data[i]=this.passwordMessage;
            }
            result_ok = checker.fn(data[i]);
            if (!result_ok) {
                msg=i + checker.instructions;
                this.messages.push(msg);
            }
        }
        return this.hasErrors();
    },
    // helper
    hasErrors: function () {
        return this.messages.length == 0;
    }
}

// 验证给定的值是否不为空
verifydata.types.isNonEmpty = {
    fn: function (value) {
        return value !== "";
    },
    instructions: "值不能为空"
};
// 验证给定的值不为空 且（手机号码）匹配
verifydata.types.isNoEmptyMatchPhone = {
    fn: function (value) {
        var isMobile = /^(?:13\d|15\d|17\d|18\d)\d{5}(\d{3}|\*{3})$/;
        value==""? this.instructions="不能为空" :(isMobile.test(value)=='ture' ? " " :this.instructions="手机号码输入格式不正确！");
        return value!='' && isMobile.test(value);
    },
    instructions: ""
};
// 验证给定的值不为空 且（邮箱号码）匹配
verifydata.types.isNoEmptyMatchMail = {
    fn: function (value) {
        var isMail = /([a-z0-9]*[-_\.]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[\.][a-z]{2,3}([\.][a-z]{2})?/i;
        value==""? this.instructions="不能为空" :(isMail.test(value )=='ture' ? " " :this.instructions="邮箱输入格式不正确！");
        return value !== ""&& isMail.test(value );
    },
    instructions: ""
};

// 验证密码是否一致
verifydata.types.isNonEmptyIsIdentical = {
    fn: function (value) {
        var a=value.password,b=value.confirm_password,c;
        (a===b)? c=true :c=false;
        (a===b)? this.instruction="" : this.instructions="密码不一致";
        return c;
    },
    instructions: " "
};

 


　　　　 </script>
</head>
<body>
	<div class="box">
		<div class="item item">
			<label for="">姓名</label>
			<input type="text" id="name">
		</div>
		<div class="item item">
			<label for="">手机号码</label>
			<input type="text" id="telphone">
		</div>
		<div class="item item">
			<label for="">电子邮箱</label>
			<input type="text" id="email">
		</div>
		<div class="item item">
			<label for="">公司名称</label>
			<input type="text" id="company">
		</div>
		<div class="item item">
			<label for="">密码</label>
			<input type="text" id="password">
		</div>
		<div class="item item">
			<label for="">确认密码</label>
			<input type="text" id="confim_password">
		</div>
		<div>
			<button id="submit">确认</button>
		</div>
	</div>
	<script>
		//配置项
		verifydata.config = {
		    name: 'isNonEmpty',//不能为空
		    mobile: 'isNoEmptyMatchPhone',//不能为空且正常匹配
		 	mail: 'isNoEmptyMatchMail',//不能为空且正常匹配
			company:"isNonEmpty",//不能为空
			password:"isNonEmpty",//不能为空,
			confirm_password:"isNonEmptyIsIdentical"//密码一致
		};
		$("#submit").click(function(){
			var isSubmit = true;
			var postData = {};
	        postData.name = $("#name").val();//姓名
	        postData.mobile = $("#telphone").val();//手机号码
	        postData.mail=$("#email").val();//电子邮箱
	        postData.company = $("#company").val();//公司名称
	        postData.password=$("#password").val();//密码
	        postData.confirm_password=$("#confim_password").val();//确认密码 
	        verifydata.validate(postData);
	        if (verifydata.hasErrors()) {
			   verifydata.popinit("验证成功！");
			}else{
				verifydata.popinit(verifydata.messages[0]);
			}
		})
	</script>
	<link rel="stylesheet" href="">
</body>
</html>

　　

posted on 2017-03-13 17:34  志明1220  阅读(106)  评论(0)  编辑  收藏  举报

导航