1、表单下,我们必须配置检索功能,不能让用户乱写
2、:rules就是用来接触我们的规则属性的方法
3、要加prop,这里要规则的属性一致
4、表单校验规则要一样
5、里面传规则
6、用正则表达式,进行排除
7、正则匹配,
8、
9、密码也要做校验,意思是非空字符
9.1
<!-- 注册的表单区域 --> <el-form ref="form" :model="form" label-width="0px" :rules="rulesOBbj" > <el-form-item prop="username"> <el-input placeholder="请输入用户名" v-model="form.username"></el-input> </el-form-item> <el-form-item prop="password"> <el-input placeholder="请输入密码" v-model="form.password"></el-input> </el-form-item> <el-form-item prop="repassword"> <el-input placeholder="请再次确认密码" v-model="form.repassword"></el-input> </el-form-item> <el-form-item> <el-button type="primary" class="btn-reg">注册</el-button> <el-link type="info">去登录</el-link> </el-form-item> </el-form> <script> // 经验 // 前端绑定数据对象属性名,可以直接跟要调用的功能接口的参数名一致 // 好处是:我们可以吧前端对象(带着同名的属性和前端的值)发给后台 export default { name: 'my-register', data () { // 注意:必须在data函数里定义此箭头函数,才能确保this.from使用 const samePwd = (rule, value, callback) => { if (value !== this.form.password) { // 如果验证失败,则调用 回调函数时,指定一个 Error 对象。 callback(new Error('两次输入的密码不一致!')) } else { // 如果验证成功,则直接调用 callback 回调函数即可。 callback() } } return { form: { // 表单的数据对象 username: '', // 用户名 password: '', // 密码 repassword: '' // 确认密码 }, rulesOBbj: { // 表单的规则检验对象 username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { pattern: /^[a-zA-Z0-9]{1,10}$/, message: '用户名必须是1-10的大小写字母数字', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { pattern: /^\S{6,15}$/, message: '密码必须是6-15的非空字符', trigger: 'blur' } ], repassword: [ { required: true, message: '请再次输入密码', trigger: 'blur' }, { pattern: /^\S{6,15}$/, message: '密码必须是6-15的非空字符', trigger: 'blur' }, { validator: samePwd, trigger: 'blur' } ] } } } } </script>
10、 必须写到date里
11、表单校验的写法
12、效果展示
13、写一个类型
14、表单的校验,最后git提交