一. 表单校验的先决条件
- <el-form /> 标签用v-bind:model绑定数据对象。:rules绑定校验规则对象。
注意： model是表单的属性，用v-bind绑定。这跟 v-model不是一回事！！！！！！！！！
<el-form
:model="loginForm"
:rules="loginRules"
/>
data () {
return {
// 表单绑定的数据对象
loginForm: {
// 校验的字段
mobile: '',
password: ''
},
// 表单绑定的校验规则对象
loginRules: {
mobile: [],
password:[]
}
},
- <el-form-item />标签设置 prop属性。值为 数据对象中的校验字段。
<el-form-item prop="mobile" > </el-form-item>
3.<el-input />标签用v-model 绑定数据对象中相对应的数据。
<el-input v-model="loginForm.mobile"> </el-input>
二、表单校验规则
| 规则 | 说明 |
|---|---|
| required | 如果为true，表示该字段为必填 |
| message | 当不满足设置的规则时的提示信息 |
| pattern | 正则表达式，通过正则验证值 |
| min | 当值为字符串时，min表示字符串的最小长度，当值为数字时，min表示数字的最小值 |
| max | 当值为字符串时，max表示字符串的最大长度，当值为数字时，max表示数字的最大值 |
| trigger | 校验的触发方式，change（值改变） / blur （失去焦点）两种 |
| validator | 如果配置型的校验规则不满足你的需求，你可以通过自定义函数来完成校验 |
格式：
loginRules:{
校验字段：[ { }，{ }，{ } ]
}
loginRules: {
mobile: [{
required: true, message: '手机号不能为空', trigger: 'blur'
},
{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }],
}
三、自定义校验规则
- validator是一个函数，可以定义在 data 中。
data () {
// 自定义校验规则
const checkMobile = function (rulue, value, callback) {
value.charAt(2) === '0' ? callback() : callback(new Error('错误'))
}
return {}
}
第一个参数代表当前的校验规则。
第二个参数代表当前被校验的数据。
第三个参数是一个回调函数。注意：无论是否通过校验，都要调用callback()函数。
- 自定义校验规则的函数定义好之后，要在规则对象中引用。
loginRules: {
mobile: [{ validator: checkMobile, message: '手机号第三位必须是0', trigger: 'blur' }]
}
四、手动校验
1.什么是手动校验
① 以上校验只能在表单失去焦点或者内容变化时触发。
② 现在希望点击登录按钮时对所有表单项进行校验。或者对部分表单进行校验。
2.如何实现手动校验
element-ui提供了表单校验的API，我们需要通过 this.$refs 拿到表单的 DOM对象，来调用API函数。
① 给<el-form> 标签设置 ref 属性。。
② 给提交按钮绑定点击事件。
③ 在事件函数中，给表单对象绑定 validate()函数，进行校验。
methods: {
// 手动校验
submitForm () {
this.$refs.loginFormRef.validate()
.then(() => console.log('校验成功'))
.catch((error) => console.log('校验失败'))
}
}
3. element-ui 提供的表单校验API
| 方法名 | 说明 | 参数 |
|---|---|---|
| validate | 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise | Function(callback: Function(boolean, object)) |
| validateField | 对部分表单字段进行校验的方法 | Function(props: array | string, callback: Function(errorMessage: string)) |
| resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | — |
| clearValidate | 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果 | Function(props: array | string) |
（1）validate可以传入一个函数作为参数，判断是否校验成功；也可以使用promise的.then().catch()方法。
（2）上面使用的是promise方法。下面是传入回调函数的方法。
this.$refs.loginFormRef.validate(（boolean，object）=>{} )
形参boolean的值可以判断校验是否成功；形参object时未通过校验的字段。
五、其他
1. vue.cli的webpack反向代理
（1）为什么存在跨域？
当下,最流行的就是前后分离项目,也就是前端项目和后端接口并不在一个域名之下，那么前端项目访问后端接口必然存在跨域的行为。
（2）跨域分几种情况？
跨域分为 开发环境的跨域 和 生产环境的跨域。前端人员在本地开发，与后端接口存在跨域；上线后，项目在腾讯、百度的服务器上，与后端接口也存在跨域。
（3）如何解决开发环境的跨域？
开发环境的跨域，也就是在vue-cli脚手架环境下开发启动服务时，我们访问接口所遇到的跨域问题，vue-cli为我们在本地开启了一个服务,可以通过这个服务帮我们代理请求,解决跨域问题。也就是用本地服务的后端去请求其他服务器的后端接口。
（4）具体配置。
module.exports = {
devServer: {
// 代理配置
proxy: {
// 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
// localhost:8888/api/abc => 代理给另一个服务器
// 本地的前端 =》 本地的后端 =》 代理我们向另一个服务器发请求 （行得通）
// 本地的前端 =》 另外一个服务器发请求 （跨域 行不通）
'/api': {
target: 'www.baidu.com', // 我们要代理的地址
changeOrigin: true, // 是否跨域 需要设置此值为true 才可以让本地服务代理我们发出请求
// 路径重写
pathRewrite: {
// 重新路由 localhost:8888/api/login => www.baidu.com/api/login
'^/api': '' // 这样可以把 localhost:8888/api/login 变成www.baidu.com/login
}
},
}
}
}
① 在vue.config.js配置文件中，添加反向代理的配置内容----> proxy对象。
② api：自定义的需要代理的地址。当项目请求后端接口时，如果地址里包含 api 字段，就会 触发代理机制。
③ target：跨域请求的地址，也就是从哪个后端地址请求数据。不需要加api字段，代理请求时会默认添加。
④ changeOrigin：是否跨域。值为true时，才能让本地服务的后端代替我们发出请求。
⑤ pathRewrite：重写路径。可以把请求地址中不需要的部分替换。
注意：配置好反向代理后，axios的基础地址直接写 api 即可 。
- 组件库中，组件的 属性、事件、方法。v-bind 、v-on 、this.$refs
