前端验证必不可少~

输入框验证

vue文件部分：

<form :model="form" :rules="rules" ref="form"><form-item :label="姓名" prop="name"><kc-input v-model="form.name"></kc-input></form-item>
</form>

ts文件部分：

export default Vue.extend({data() {return {form: {name: "",},rules: {name: [{ required: true, message: "请输入姓名", trigger: "blur" },],}}},methods: {// 验证submitForm(): void {const form = this.$refs.form as Vue;form.validate((valid: any) => {if (valid) {this.doSave();} else {return false;}});},doSave() {console.log("验证ok");},},
});

其中，需要注意的是先定义验证规则rules，form-item标签上的prop属性的值是rules中定义的，这个name在form中和rules中都要保持一致。

下拉框的验证

在上面代码的基础上增加一个下拉框的验证。

vue文件部分：

<form :model="form" :rules="rules" ref="form" :class="$style.form"><form-item :label="姓名" prop="name"><kc-input v-model="form.name"></kc-input></form-item><form-item :label="课程" prop="courses"><select v-model="form.courses" placeholder="请输入课程"><option    v-for="item in courseOption" :key="item.id" :label="item.name" :value="item.id"> </option></select></form-item>
</form>

ts文件部分：

interface Icourse {id: string;name: string;selected: boolean;
}
export default Vue.extend({data() {const courseOption: Icourse[] = [{    id: "1",name: "语文",selected: false,}, {id: "2",name: "数学",selected: false,}, {id: "3",name: "英语",selected: false,}];return {form: {name: "",courses: "",},courseOption,rules: {name: [{ required: true, message: "请输入姓名", trigger: "blur" },],courses: [{ required: true, message: "请输入课程", trigger: "change" },],}}},// ...
});

这里，下拉框的验证和输入框的大致一样，都需要保持form中和rules中的courses相同，只是这儿是ts的写法，多了一个ts接口。

很明显，以上代码中data部分都是一层对象，如果有嵌套的对象出现，如何验证呢？

举个例子，

ts文件的data部分：

data() {const student= {info: {name: "",age: "",}cls: "",school: "",};return {student,rules: {"info.name": [{ required: true, message: "请输入姓名", trigger: "blur" },],"info.age": [{ required: true, message: "请输入年龄", trigger: "blur" },],"cls": [{ required: true, message: "请输入班级", trigger: "blur" },],"school": [{ required: true, message: "请输入学校", trigger: "blur" },]},};
},

相应的vue文件部分：

<form :model="student" :rules="rules" ref="student"><form-item :label="姓名" prop="info.name"><kc-input v-model="student.info.name"></kc-input></form-item><form-item :label="年龄" prop="info.age"><kc-input v-model="student.info.age"></kc-input></form-item><form-item :label="班级" prop="cls"><kc-input v-model="student.cls"></kc-input></form-item><form-item :label="学校" prop="school"><kc-input v-model="student.school"></kc-input></form-item>
</form>

其实很简单，会了就很简单~

关注我吧

关注「前端一起学」公众号，看着项目进阶学习，让我们一起学前端，一起进步。

Vue简单的表单验证相关推荐

jQuery之简单的表单验证
jQuery之简单的表单验证 html部分: <body><form method="post" action=""><div c ...
用jQuery写的最简单的表单验证
近几天完成了关于我们项目的最简单的表单验证,是用jQuery写的,由于之前也一直没学过jQuery,所以自己也是一直处于边摸索边学习的阶段,经过这一段时间的学习,通过查资料啥的,也发现了学习jQuer ...
angularjs学习第四天笔记（第一篇：简单的表单验证）
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
vue + element 自定义表单验证的时候需要通过请求后端接口验证
vue + element 自定义表单验证的时候需要通过请求后端接口验证做vue项目的时候遇到了一个需求,在验证某个表单项时不仅需要是必填项而且要去通过接口校验是否有重复值. // templat ...
vue 中 Element-UI 表单验证的几种方法
在开始之前需要把element-ui在vue中引入好,如果没有引入好的话,需要先跟着element-ui的文档进行操作,接下来就可以进行学习了. 第一种:在el-form-item单个添加验证这种方 ...
JS正则表达式实现简单的表单验证（账号，密码，手机号）
首先有三个文本框,和一个提交按钮,第一个输入账号,第二个密码,第三个手机号我们的需求:判断3个文本框是否全部输入正确,当我们点击提交时,如果有一个输入错误则不能提交,全部输入正确则提交成功: 下面直 ...
用jquery实现简单的表单验证
HTML代码: 1 <form action="" method="post" id="form-data">2 <div ...
Vue element 自定义表单验证(验证联系方式、邮箱、邮政编码)
<el-form:model="form":rules="rules"ref="formRef"style="max-wid ...
Vue element 自定义表单验证（手机号校验）
element官网中没有手机号的验证? 别慌,绝绝子来教你呀! 手机号验证效果如下: 代码如下: <el-form-item label="手机号" prop="t ...

Vue简单的表单验证

输入框验证

下拉框的验证

关注我吧

Vue简单的表单验证相关推荐

最新文章

热门文章