• 前端分享学习博客,探究前端相关技术,推动天朝前端发展,有任何问题都可以留言一起探究
  • 由于站内自链接问题,部分pre中的代码首字母使用大写以过滤筛选
  • 欢迎友链互换,还有,如果有大神请不要黑我的站点(o´・ェ・`o)
  • 如果你觉得博客还不错,请Ctrl+D收藏( *︾▽︾)

Element表单验证–自定义查询验证

如题,Element表单验证,用了一段时间的Element,提交表单和表单验证是比较常见的情景,大部分的验证是本地就可以完成的,比如必填,数字验证等,使用Element所提供的一套方式很方便,也很优雅:

Element表单验证--自定义查询验证

然后在表单处使用规则就可以:

<el-form :model="ruleForm" :rules="rules" ref="ruleForm"></el-form>

点击这里查看详情:官方示例-Form

另外也可以自定义一些验证如

export default {
	data() {
		var validateNum = (rule, value, callback) => {
			if(value === '') {
				callback(new Error('不能为空'));
			} else if(value === '0') {
				callback(new Error('不能为0'));
			} else {
				callback();
			}
		};
		return {
			num: '0',
			rules: {
				amount: [{
					validator: validateNum,
					trigger: 'blur'
				}]
			}
		}
	}
}

不是所有的验证都能像这种形式完成的,比如检测产品编号唯一性和名称等:

Element表单验证--自定义查询验证

当然如果是单独对接一个checkname接口,blur或change检测也是可以的,觉得没有必要,写了其他验证的话,能放一起最好,表单部分如下:

Element表单验证--自定义查询验证

代码部分(简化):

data() {
	return {
		formdata: {
			product_id: 0, // 产品id,新增时传0即可
			product_name: '',
			is_house: 0, // 是否房易融系列, 由外部的ishouse 监听而来
			annual_rate_new: '', // 预期年化
			product_type_id: '1', // 产品类型id
			interest_pay_type: '1', // 兑付方式,1到期付息,2每月付息,3预付息
			duration: '1', // 理财周期,月为单位
		},
		is_house: false, // 是否房易融系列
		seemadd: false, // 预期年化 同新增勾选
		loading: false,
		radio: '1',
		num1: 0,
		num2: 0,
		wan: 0,
		forms: { //计算器 理财金额
			limit: 0,
		},
		subRules: {
			product_name: [{
					required: true,
					message: '请输入活动名称',
					trigger: 'blur'
				},
				{
					validator(rule, value, callback) {
						$.ajax({
							type: 'get',
							url: baseUrl + '/goods/check_name',
							data: 'product_id=' + Cookies.get('proid') + '&product_name=' + Cookies.get('proname'),
							beforeSend: function(request) {
								request.setRequestHeader("ADMIN-Token", Cookies.get('admin_token'));
							}
						}).then(function(data) {
							console.log(value)
							if(data.message == 'SUCCESS') {
								callback()
							} else {
								callback(new Error('名称已经被占用'))
							}
						}, function(error) {
							callback(new Error(error))
						});
					},
				}
			],
			annual_rate_new: [{
					required: true,
					message: '请输入新增年化',
					trigger: 'blur'
				},
				{
					pattern: /^\d+(?=\.{0,1}\d+$|$)/,
					message: '必须是正数'
				}
			],
			annual_rate_renew: [{
					required: true,
					message: '请输入预约年化',
					trigger: 'blur'
				},
				{
					pattern: /^\d+(?=\.{0,1}\d+$|$)/,
					message: '必须是正数'
				}
			],
			min_invest_amount: [{
					required: true,
					message: '请输入起投金额',
					trigger: 'blur'
				},
				{
					pattern: /^\d+(?=\.{0,1}\d+$|$)/,
					message: '必须是正数'
				}
			],
			invest_unit: [{
					required: true,
					message: '请输入最小投资单位',
					trigger: 'blur'
				},
				{
					pattern: /^\d+(?=\.{0,1}\d+$|$)/,
					message: '必须是正数'
				}
			]
		},
		edittype: 0, // 编辑模式,0默认新加产品, 1编辑产品, 2拷贝产品
		fullloading: null
	}
}

需要注意的是,以上代码中ajax部分,data: ‘product_id=’ + Cookies.get(‘proid’) + ‘&product_name=’ + Cookies.get(‘proname’) ,验证方法中貌似不能直接取formdata值,就放到cookie中了,有点别扭,后面再优化;

每次当产品名称发生变化时,或者从列表页面进入编辑、复制产品页的时候,都会自动执行这个验证ajax(编辑产品时,此产品名称可继续使用,复制此产品是,进入编辑页名称就提示不可用),告知管理员当前产品名称是否可用;

Element表单验证--自定义查询验证

点击编辑与点击复制:

Element表单验证--自定义查询验证

Element表单验证--自定义查询验证

 

参考:async-validator


薛陈磊的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明Element表单验证–自定义查询验证
喜欢 (1)
[]
分享 (0)
作者薛陈磊
关于作者:
非著名前端Coder,中二非文艺闷骚少年,喜欢动漫、历史、暗荣三国志和游山玩水,关注互联网发展,期待遇到更多小伙伴一起吹水玩耍;
说点什么...
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)