工作188：表单校验规则

1绑定rules

  <el-dialog title="新建账号" :visible.sync="dialogFormVisible" @close="close"><!--1.name--><el-form ref="form" :rules="rules"  :model="form" size="medium" :label-width="formLabelWidth"><el-form-item prop="name" label="账号名称" :label-width="formLabelWidth"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><!--3platform--><el-form-item  prop="platform"  label="所属平台" :label-width="formLabelWidth"><el-input v-model="form.platform" autocomplete="off"></el-input></el-form-item><!--6department_id--><el-form-item prop="department_id" label="所属部门" :label-width="formLabelWidth"><select-form @change="DepartmentList"  v-model="form.department_id" /></el-form-item><!-- <el-form-item prop="business_module" label="所属栏目" :label-width="formLabelWidth">&lt;!&ndash;注意用户的返回值&ndash;&gt;<el-select v-model="form.business_module"  placeholder="请选择所属栏目" multiple><el-option @click="resetLoginFrom" v-for="label in business_module" :label="label" :value="label"></el-option></el-select></el-form-item>--><!--7column--><el-form-item prop="column" label="所属单元" :label-width="formLabelWidth"><!--注意用户的返回值--><el-select @change="updateFun" v-model="form.column"  placeholder="请选择所属栏目" multiple><el-option  v-for="column in columns" :label="column" :value="column"></el-option></el-select></el-form-item><!--2content_type--><el-form-item prop="resource_type" label="内容类型" :label-width="formLabelWidth"><el-select v-model="form.resource_type" placeholder="请选择发布类型"><el-option v-for="resource in resource_type" :label="resource.text" :value="resource.value"></el-option></el-select></el-form-item><!--5price--><el-form-item prop="price" label="刊例价" :label-width="formLabelWidth"><el-input v-model="form.price" autocomplete="off"></el-input></el-form-item><el-form-item prop="content_type" label="发布类型" :label-width="formLabelWidth"><el-select v-model="form.content_type" placeholder="请选择发布类型"><el-option v-for="content in content_type" :label="content.text" :value="content.value"></el-option></el-select></el-form-item></el-form>

2data里面声明

return {/*表单校验规则*/rules:{name: [{ required: true, message: '请输入账号名称',trigger:'blur'}, // 'blur'是鼠标失去焦点的时候会触发验证],platform: [{ required: true, message: '请输入所属平台',trigger:'blur'}, // 'blur'是鼠标失去焦点的时候会触发验证],department_id:[{ required: true, message: '请输入部门id',trigger:'blur'} // 'blur'是鼠标失去焦点的时候会触发验证],column:[{ required: true, message: '请输入所属单元',trigger:'blur'} // 'blur'是鼠标失去焦点的时候会触发验证],resource_type:[{ required: true, message: '请输入业务单元',trigger:'blur'} // 'blur'是鼠标失去焦点的时候会触发验证],content_type:[{ required: true, message: '请输入业务单元',trigger:'blur'} // 'blur'是鼠标失去焦点的时候会触发验证],price:[{ required: true, message: '请输入业务单元',trigger:'blur'} // 'blur'是鼠标失去焦点的时候会触发验证],},

工作188：表单校验规则相关推荐

工作187：表单校验规则
第一种常用方式:表单上加rules{object} <el-form class="apply-form first-form" :model="formData& ...
antd 自定义表单校验规则
html部分 <a-form-item name="username"><a-input v-model:value="loginForm.userna ...
基于vue3的京东nutui组件库的表单校验规则：怎样进行表单验证？怎样只使用指定的某一个规则进行校验呢？
官网: NutUI - 移动端 Vue2.Vue3.小程序组件库京东风格的轻量级移动端 Vue.React 组件库https://nutui.jd.com/#/component/form 用法: ...
vant Weapp版本没有自带表单校验
自己实现一个简单的rules-form工具类在utils文件下创建rules-form.js // 表单校验 /*** 规则* rules: {* name: [* {required: true, ...
2.vue3医疗在线问诊项目 - _登录模块 ==＞代码片段、css变量主题定制、cp-nav-bar组件封装、svg打包精灵图插件、cp-icon组件封装、表单校验、密码登录、短信验证码登录及两者
2.医疗在线问诊项目 - _登录模块 ==> 代码片段.css变量主题定制.cp-nav-bar组件封装.svg打包精灵图插件.cp-icon组件封装.表单校验.密码登录.短信验证码登录及两者的 ...
EelemntUI中e-form表单校验的使用以及表单校验的规则
场景 Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可. 官方示例代码 <el-form ...
Element-ui Form表单校验-兜底校验-自定义检验规则
用户登录表单-数据双向绑定 <template><div class="form-container"><el-form label-width=&q ...
DOM编程事件正则表达式表单校验
目录一.增加二.删除三.查找购物车四.事件和事件对象 4.1 事件对象 4.2 目标事件对象 4.3 事件监听对象 4.4 文档事件对象 4.5 鼠标键盘事件对象 4.6 事件阻 ...
实战课【1】jQuery实现表单校验及布局
实战课[1]jQuery实现表单校验及布局在学习完html,css,js,mysql,jdbc,Servlet,filter,ajax,maven等web基础知识后,开始进行项目实战.此文就会记录在 ...

工作188：表单校验规则

工作188：表单校验规则相关推荐

最新文章

热门文章