js 表单验证(含自定义)


$().ready(function() {
	
	jQuery.validator.addMethod("isMobile", function(value, element) {
		var length = value.length;
		var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
		return this.optional(element) || (length == 11 && mobile.test(value));
	}, "请正确填写手机号码");

	jQuery.validator.addMethod("isPhone", function(value,element) { 
		var length = value.length; 
		var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/; 
		var tel = /^\d{3,4}-?\d{7,9}$/; 
		return this.optional(element) || (tel.test(value) || mobile.test(value)); 
	}, "请正确填写联系方式"); 

	jQuery.validator.addMethod("chrnum", function(value, element) {
		var chrnum = /^([a-zA-Z0-9]+)$/;
		return this.optional(element) || (chrnum.test(value));
	}, "只能输入数字和英文字母");
	
	validateAddForm();
});

// 验证表单
var validateOption;
/**表单验证配置
 * 
 */
function validateAddForm() {
	validateOption = {
		rules: {
			username: {
				required: true,
				chrnum: true,
				minlength: 6,
				maxlength: 20,
				remote: {
					url: "register?method=isNameExist",
					type: "post",
					data: {
						username: function(){return $("#username").val();}
					}
				}
			},
			password: {
				required: true,
				chrnum: true,
				minlength: 8,
				maxlength: 20
			},
			confirmPassword: {
				required: true,
				minlength: 8,
				maxlength: 20,
				equalTo: "#password"
			},
			email: {
				required: true,
				email: true	
			},
			cellphone: {
				required: true,
				isPhone: true
			},
			endTime: {
				required: true,
				dateISO: true
			}
		},
		messages: {
			username: {
				required: "不能为空",
				chrnum: "由数字、英文字母组成",
				minlength: "最少6个字符",
				maxlength: "最多20个字符",
				remote: "账户名已存在"
			},
			password: {
				required: "不能为空",
				chrnum: "由数字、英文字母组成",
				minlength: "最少8个字符",
				maxlength: "最多20个字符"					
			},
			confirmPassword: {
				required: "不能为空",
				chrnum: "由数字、英文字母组成",
				minlength: "最少8个字符",
				maxlength: "最多20个字符",
				equalTo: "确认密码错误"					
			},
			email: {
				required: "不能为空",
				email: "格式错误"
			},
			cellphone: {
				required: "不能为空",
				isMobile: "格式错误"
			},
			endTime: {
				required: "不能为空",
				dateISO: "2014-01-01"
			}
		},
		errorPlacement: function(error, element) {  
			element.parent().addClass("warning-state");
			error[0].clientWidth;
			error.insertAfter(element);
        },
        
        success: function(label) {
        	var $obj = $(label);
        	if($obj.prev().hasClass("warning-state")){
        		$obj.prev().removeClass("warning-state");
        		$obj.remove();
        	}
        },
	};
	$("#addForm").validate(validateOption);
}

/**
 * 使用
 */
function addAccount() {
	$("#addForm").validate(validateOption);
	if (!$('#addForm').valid()) {
		return;
	}
	$.ajax({
		type: "post",
		url: "account?method=update",
		dataType: "json",
		data: {},
		success: function(data, textStatus) {
			
		},
		error: function (XMLHttpRequest, textStatus, errorThrown) {
			
		}
	});
}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Element UI 中,可以通过自定义验证规则来验证表单输入的数据。面是一个示例代码,演示何自定义验证规则: ```javascript // 导入 Element UI 的验证规则方法 import { validate } from 'element-ui' // 自定义验证规则 const customRules = { // 自定义规则名称:验证函数 customRule1: (rule, value, callback) => { if (value === 'custom') { callback(new Error('自定义规则1验证失败')) } else { callback() } }, customRule2: (rule, value, callback) => { if (value.length < 5) { callback(new Error('自定义规则2验证失败')) } else { callback() } }, } // 在表单中使用自定义验证规则 <el-form :rules="customRules"> <el-form-item label="自定义规则1"> <el-input v-model="input1"></el-input> </el-form-item> <el-form-item label="自定义规则2"> <el-input v-model="input2"></el-input> </el-form-item> </el-form> ``` 在上面的代码中,我们首先导入了 Element UI 的验证规则方法 `validate`。然后定义了两个自定义验证规则 `customRule1` 和 `customRule2`,这两个规则分别对输入的值进行验证,并根据验证结果调用回调函数 `callback`。当验证失败时,使用 `new Error()` 创建一个错误对象,并传递给回调函数;当验证通过时,直接调用回调函数即可。 最后,在表单中使用自定义验证规则时,将自定义规则对象 `customRules` 通过 `:rules` 属性传递给 `el-form` 组件。在每个需要验证的表单项中,通过 `v-model` 绑定输入的值,然后在 `el-form-item` 组件中添加相应的标签和验证提示信息。 这样,当用户输入的值不符合自定义的验证规则时,Element UI 会自动显示相应的错误提示信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值