element-ui的安装
第一步:命令窗口中在项目地址下:
输入npm i element-ui -S 安装elementui 依赖
第二步:完整引入
在 main.js 中写入以下内容:
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
第三步:按需引入组件
from表单的登录页面
el-form 组件 :model="ruleForm" ruleForm是data中定义的存储的是用户名和密码值的对象 通过model传给el-form组件
:rules="rules" rules是data中定义的对象,目的是校验用户名和密码的规则
-- ref="ruleForm" 咱们可以通过ref来获取el-form组件内部的方法 比如:validate校验方法 resetFields重置方法
status-icon 是在表单校验错误的时候 输入框中出现的提示小图标
--label-width="200px" 是用来控制用户名和密码文本的宽度
用户登录
提交
重置
export default {
name: "LoginView",
data() {
var checkUser = (rule, value, callback) => {
console.log("用户名:", value);
if (value.trim() == "") {
callback(new Error("请输入用户名"));
} else if (!/^[\w\u4e00-\u9fa5]{5,10}$/.test(value)) {
callback(new Error("用户名为5-10位中英文数字或者下划线"));
} else {
callback();
}
};
var validatePass = (rule, value, callback) => {
console.log("密码:", value);
if (value.trim() == "") {
callback(new Error("请输入密码"));
} else {
callback();
}
};
return {
ruleForm: {
password: "",
username: "",
},
rules: {
password: [{ validator: validatePass, trigger: "blur" }],
username: [{ validator: checkUser, trigger: "blur" }],
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
el-form组件的validate方法 在回调函数中,如果vaild为true,则表示表单验证通过,为false则不通过
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
};