mui、vue 开发混合App表单验证

IT-随笔

已于 2022-09-06 17:00:50 修改

阅读量1.2k

点赞数 1

分类专栏： App混合开发文章标签： mui vue form

于 2019-11-28 14:32:18 首次发布

本文链接：https://blog.csdn.net/weixin_42771523/article/details/103292893

版权

App混合开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

mui、vue 开发混合App表单验证

最近开发app遇到了表单验证的问题，在网上找了半天，都不是想要的东西。下面是自己写的验证，比较简单，还没有完善。

<div class="form-group">
		<h5 class="mui-content-padded">申请原因 *</h5>
		<input type="text" class="mui-input-clear" v-model="listsource.Description" placeholder="请输入申请原因" />
</div>
<div class="form-group">
		<h5 class="mui-content-padded">访客姓名 *</h5>
		<input type="text" class="mui-input-clear" v-model="listsource.VisitorName" placeholder="请输入访客姓名" />
</div>

const vm = new Vue({
	el: "#content",
	data: {
		listsource: {
			Description: "",
			VisitorName: "",	
	},
	created() {},

	methods: {
		submit(e) {
			if (this.isNotNull() === false) {
				return;
			}
		},
		// 表单验证
		isNotNull() {
			for (let item in this.listsource) {
				if (this.listsource.Description === '') {
					mui.toast('请输入申请原因');
					return false;
				}
				if (this.listsource.VisitorName === '') {
					mui.toast('请输入拜访人姓名');
					return false;
				}
				if (this.listsource.VistorIDCardNo === '' || this.IDCardNoRule(this.listsource.VistorIDCardNo) === false) {
					mui.toast('请输入正确的身份证号');
					return false;
				}
			}
		},
		IDCardNoRule(IdCode) {
			const reg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
			if (reg.test(IdCode) === false) {
				mui.toast('请输入正确的身份证号!');
				return false;
			} else {
				return true;
			}
		},
		phoneRule(data) {
			const reg = /^1[3|4|5|7|8][0-9]{9}$/;
			return reg.test(data) === true ? true : false;
		},	
	}
});