1. Form 表单校验规则
export default {
data() {
// 定义邮箱校验规则
var checkEmail = (rule, value, cb) => {
// 验证邮箱的正则表达式
const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
if(regEmail.test(value)) {
// 校验通过
return cb()
}
// 校验失败提示
cb(new Error('请输入合法的邮箱'))
}
// 定义校验手机规则
var checkMobile = (rule, value, cb) => {
// 验证手机号的正则表达式 这个验证规则邮缺陷 只能验证13 开头的手机号
const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
if(regMobile.test(value)) {
// 校验通过
return cb()
}
// 校验失败提示
cb(new Error('请输入合法的手机号'))
}
return {
}
}
}
// 添加用户校验规则
addFormRules: {
email: [
{ required: true, message: "请输入邮箱", trigger: "blur" },
{ validator: checkEmail, trigger: 'blur' }
],
mobile: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{ validator: checkMobile, trigger: 'blur' }
]
}
<br />
2. 重置 Form 表单数据
// 监听添加用户对话框的关闭事件
addDialogClosed() {
// 重置对话框表单
this.$refs.addFormRef.resetFields()
}
<br />
3. 验证表单是否符合 验证规则（返回promise 函数）
// 注意： addForm addFormRules addFormRef 这些数据都需要在 数据 中定义的
<el-form
:model="addForm"
:rules="addFormRules"
ref="addFormRef"
label-width="70px"
>
</el-form>
// 添加新用户
addUser() {
// 表单预验证
this.$refs.addFormRef.validate( validate => {
// console.log(validate) 返回 的是 false 和 true
if(!validate) return
// 表单校验完成后， 就可以发起请求了
const {data: res} = await this.$http.post(`categories/${this.cateId}/attributes`, {attr_name: this.addForm.attr_name, attr_sel: this.activeName})
})
<br />
4. Message Box 弹框
// 根据Id删除对应的用户信息
async removeUserById() {
const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).catch( err => {
return err
})
// 如果用户确认删除，则返回值为字符串 confirm
// 如果用户取消了删除，则返回值为字符串 cancel
// console.log(confirmResult)
if(confirmResult !== 'confirm') {
return this.$message.info('已取消删除该用户')
}
console.log('删除成功')
<br />
5. 选中多个一样的英文单词
editFormRef 1. 选中要修改的单词 2. 按快捷键 Ctrl + D 可以选中多个一样的单词
