JS自定义简陋的表单验证插件

绝地灬酷狼 2022-07-15 03:15 211阅读 0赞

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title id="titles">asdsa</title>
    <script src="jquery-1.9.1.min.js"></script>
    <script src="EuiValidata.js"></script>
    <script language="JavaScript" type="text/javascript">
    	$().ready(function(){
    		$("#euiform").valiData();
    	});  
    </script>
    
    </head>
    
    <body>
    	<form id="euiform" action="http://baidu.com" method="post">
    		<input type="text" id="uname" check="required" ajaxUrl="baidu.com">
    		<input type="text" id="age" check="required">
    		<input type="text" id="sex" check="required">
    		<input type="text" id="addr" check="required">
    		<input type="submit" value="提交" >
    	</form>
    </body>
    
    </html>

(function($){
    	$.fn.valiData = function(options){
    		//当前表单对象
    		var root = this;
    		var formid = JSON.stringify(root.selector).replace(/\"/g, "");
    		var zflas = false;
    		var defaults = {
    			//错误图片地址
    			img_error:"",
    			//验证通过图片地址
    			img_success:"",
                //提示信息
                success: '',
                //验证成功时的提示信息，默认为空
                required: '不能为空',
                email: '邮箱地址格式有误',
                num: '请填写数字',
                chinese: '请填写中文',
                mobile: '手机号码格式有误',
                idcard: '身份证号码格式有误',
                pwdequal: '两次密码不一致',
    
                //正则
                email: /^\w+\@[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$/i,
                //验证邮箱
                num: /^\d+$/,
                //验证数字
                chinese: /^[\u4E00-\u9FA5]+$/,
                //验证中文
                mobile: /^1[3458]{1}[0-9]{9}$/,
                //验证手机
                idcard: /^\d{14}\d{3}?\w$/ //验证身份证
            };
    
    		//获取对应form表单下 添加验证的元素
    		$(""+formid+" [check]").each(function(){
    			//给每个元素添加事件 失去焦点时触发
    			$(this).blur(function(){
    				var arr = $(this).attr("check").split(" ");
    				for(var x=0;x<arr.length;x++){
    					if(checkVali($(this),arr[x])){
    						zflas = true;
    					}	
    				}
    			});
    		});
    		
    		//点击提交 验证
    		var _submit_Vlai = function(){
    			$(""+formid+" [check]").each(function(){
    				//验证 添加验证标识的 标签
    				if($(this).attr("check")){
    					var arr = $(this).attr("check").split(" ");
    					for(var x=0;x<arr.length;x++){
    						if(checkVali($(this),arr[x])){
    							zflas = true;
    						}	
    					}
    				}
    			});
    		}
    
    		//判断是不是表单  是提交验证
    		if (root.is("form")) {
                root.submit(function() {
    				//提交之前在检测一遍
    				_submit_Vlai();
    				return zflas;
    			})
            }
    
    		//处理 数据验证
    		var checkVali = function(obj,str_info){
    			switch(str_info){
    				case "required":
    					return obj.val() == "" ? showMsg(obj,defaults.required,false) : showMsg(obj,defaults.success,true)
    					break;
    				case "ajax":
    					//走对应的路径去后台验证
    					/*$.ajax(function(){
    						type:"post",
    						url:obj.attr("ajaxUrl"),
    						data:{
    							//假如是验证用户名重复
    							uname:obj.val()
    						},
    						dataType:"json",
    						success:function(data){
    							//处理返回的数据
    							//return true || false
    						}
    					});*/
    					break;
    					//以下的 就不处理了
    				case "email":
    					break;
    				case "pwd":
    					break;
    				case "tel":
    					break;
    				case "num":
    					break;
    				//暂时不处理默认的
    			}
    		}
    
    		 //显示成功失败信息  返回 true ||false
            var showMsg = function(obj, msg, mark) {
                $(obj).next("#errormsg").remove(); //先清除
                var _html = "<span id='errormsg' style='font-size:13px;color:gray;background:url(" + defaults.img_error + ") no-repeat 0 -1px;padding-left:20px;margin-left:5px;'>" + msg + "</span>";
                if (mark) _html = "<span id='errormsg' style='font-size:13px;color:gray;background:url(" + defaults.img_success + ") no-repeat 0 -1px;padding-left:20px;margin-left:5px;'>" + msg + "</span>";
                $(obj).after(_html); //再添加
                return mark;
            }
    	}
    })(jQuery);

发表评论取消回复

表情：

评论列表（有 0 条评论，211人围观）

还没有评论，来说两句吧...

相关阅读

相关 Django 表单验证之自定义表单验证器

本文基于[Django 表单验证][Django] 一文，补充完善表单验证器之自定义表单验证器具体步骤总结如下: 第一：在formValidation.py 文件中，添加

桃扇骨/ 2023年10月10日 13:12/ 0 赞/ 65 阅读

相关 jQuery.validate.js表单验证插件

jQuery.validate.js表单验证插件的使用效果： ![img2018-cnblogs-com_blog_1297449_201810_1297449-2018

待我称王封你为后i/ 2023年06月03日 12:53/ 0 赞/ 105 阅读

相关 JS自定义简陋的表单验证插件

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content

绝地灬酷狼/ 2022年07月15日 03:15/ 0 赞/ 212 阅读

相关 AngularJs 自定义表单验证

一、AngularJs中的表单验证，仅提供了一些前台格式验证，如果想通过后台验证，则需要自定义处理自定义指定使用ajax后台验证示例： <style>

迈不过友情╰/ 2022年06月12日 05:57/ 0 赞/ 353 阅读

相关表单自定义验证setCustomValidity

对于默认的表单验证，有时候不是很友好，所以我们可以使用自定义表单验证，如下所示： <!DOCTYPE html> <html lang="en">

冷不防/ 2022年06月12日 02:16/ 0 赞/ 339 阅读

相关表单验证插件 validate （基本表单验证，自定义验证规则）

步骤： (1) 将jquery的原始文件和插件文件jquery.validate.js导入到工程中 (2) 编写js代码对表单进行验证表单验证格式： $("\form

灰太狼/ 2022年04月10日 01:53/ 0 赞/ 459 阅读

相关 js表单验证插件jQuery-Validation-Engine-master

做项目基本离不开表单验证,想要美观，简洁，不占内存，用户体验效果好所以我推荐一款js表单验证因为我觉得这个挺好的，所以分享下文档下面也有下载的压缩包 [ht

女爷i/ 2022年01月15日 06:41/ 0 赞/ 361 阅读

相关 iview - 自定义表单验证

自定义表单验证代码 export default { data () { const validateImage = (rule,

电玩女神/ 2021年09月30日 03:14/ 0 赞/ 524 阅读

相关 jQuery--Validation插件（概述、表单验证、验证规则、自定义验证规则）详解

Validation简介最常使用的JavaScript的场合就是表单验证，而jQuery作为一个优秀的JavaScript库，也提供了一个优秀的表单验证插件——Vali

你的名字/ 2021年08月13日 16:30/ 0 赞/ 654 阅读

相关 jQuery Validate 表单验证插件----自定义校验结果样式

一、下载依赖包二、引入依赖包 <script src="../../scripts/jquery-1.3.1.js" type="text/javascr

绝地灬酷狼/ 2021年06月26日 16:06/ 0 赞/ 545 阅读