介绍
Element UI是一套基于Vue.js的UI框架，提供了丰富的组件和工具，方便开发者构建Web应用程序。其中，Form表单组件是用于收集用户输入信息的常用组件之一。
语法
<el-form :model="formData" :rules="formRules" ref="formRef" label-width="80px">
<!-- 表单项 -->
<el-form-item label="字段名" prop="fieldName">
<el-input v-model="formData.fieldName"></el-input>
</el-form-item>
<!-- 更多表单项 -->
<!-- 提交按钮 -->
<el-form-item>
<el-button type="primary" @click="submitForm('formRef')">提交</el-button>
</el-form-item>
</el-form>注意事项（*重点）
- 表单项使用
el-form-item标签包裹，每个表单项对应一个el-form-item。 label属性用于设置表单项的标签文本。prop属性用于指定表单项对应的字段名，用于表单验证。- 使用
v-model指令将表单项的值与Vue实例的数据进行双向绑定。 - 可以在
el-form标签上设置label-width属性来统一设置表单项标签的宽度。
补充资料：
案例
注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<!-- vue -->
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<!-- jquery -->
<script src="js/jquery.min.js"></script>
<!-- element-ui -->
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="js/element-ui@2.15.13.js"></script>
</head>
<body>
<div id="app">
<el-row>
<el-col :span="8" :offset="8">
<h1 align="center">注册</h1>
<!-- el-form：表单 -->
<!-- ref="ruleForm"：添加引用名 ruleForm ，这样可以通过 this.$refs.ruleForm 获取这个组件的对象 -->
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
class="demo-ruleForm">
<!-- el-form-item：表单域，表单域中可以放置各种类型的表单控件 -->
<!-- label="用户名"：标签文本为 用户名 -->
<!-- prop="name"：用于表单提交时，表示 name 对应 它里面的数据 -->
<el-form-item label="用户名" prop="name">
<!-- maxlength="15"：限制长度为15 -->
<!-- show-word-limit：展示字数统计 -->
<el-input maxlength="15" show-word-limit v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<!-- v-model="ruleForm.pass"：和vue的 ruleForm.pass 值判定 -->
<!-- autocomplete="off" ：关闭自动填入 -->
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="mail">
<el-input v-model="ruleForm.mail" maxlength="255"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</body>
<script type="text/javascript">
const vue = new Vue({
el: "#app",
data() {
var checkName = (rule, value, callback) => {
if (!value) {
callback(new Error('用户不能为空'));
}
callback();
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
callback();
}
};
var validateMail = (rule, value, callback) => {
// 使用正则表达式进行邮箱格式验证
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (regex.test(value)) {
callback();
} else {
callback(new Error('邮箱不正确'));
}
};
return {
// 表单绑定的值
ruleForm: {
name: '',
pass: '',
mail: ''
},
// 表单验证规则
rules: {
// 对应的值
name: [{
// 对应的验证方法
validator: checkName,
// 触发条件 "blur"，意思是在用户离开该表单项时进行验证
trigger: 'blur'
}],
pass: [{
validator: validatePass,
trigger: 'blur'
}],
mail: [{
validator: validateMail,
trigger: 'blur'
}]
}
};
},
methods: {
submitForm(formName) {
// 通过 this.$refs.ruleForm.validate 获取这个组件的对象并调用 validate 方法
// validate 方法会自动触发每个表单项的校验规则进行验证，
// 返回一个布尔值，表示是否验证通过。在回调函数中根据验证结果进行相应的处理。
this.$refs[formName].validate((valid) => {
if (valid) {
// 去后端发起注册请求
$.ajax({
url: "registration",
data: {
name: this.ruleForm.name,
password: this.ruleForm.pass,
mail: this.ruleForm.mail
},
success() {
// 去后端发起判断是否注册成功
$.ajax({
url: "getSession",
dataType: "JSON",
data: {
key: "user"
},
success(result) {
if (result.userName == vue.ruleForm.name &&
result.userMail == vue
.ruleForm.mail) {
location.href = 'index.html';
}
}
});
}
});
} else {
console.log('输入错误');
return false;
}
});
}
}
})
</script>
</html>登录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<!-- vue -->
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<!-- jquery -->
<script src="js/jquery.min.js"></script>
<!-- element-ui -->
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="js/element-ui@2.15.13.js"></script>
</head>
<body>
<div id="app">
<el-row>
<el-col :span="8" :offset="8">
<h1 align="center">登录</h1>
<!-- el-form：表单 -->
<!-- ref="ruleForm"：添加引用名 ruleForm ，这样可以通过 this.$refs.ruleForm 获取这个组件的对象 -->
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
class="demo-ruleForm">
<!-- el-form-item：表单域，表单域中可以放置各种类型的表单控件 -->
<!-- label="用户名"：标签文本为 用户名 -->
<!-- prop="name"：用于表单提交时，表示 name 对应 它里面的数据 -->
<el-form-item label="用户名" prop="name">
<!-- maxlength="15"：限制长度为15 -->
<!-- show-word-limit：展示字数统计 -->
<el-input maxlength="15" show-word-limit v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<!-- v-model="ruleForm.pass"：和vue的 ruleForm.pass 值判定 -->
<!-- autocomplete="off" ：关闭自动填入 -->
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
<el-button type="primary" @click="registration">注册</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</body>
<script type="text/javascript">
const vue = new Vue({
el: "#app",
data() {
var checkName = (rule, value, callback) => {
if (!value) {
callback(new Error('用户不能为空'));
}
callback();
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
// 如果确认密码不为空
if (this.ruleForm.checkPass !== '') {
// 手动触发 checkPass 字段的校验
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
// 表单绑定的值
ruleForm: {
name: '',
pass: '',
checkPass: ''
},
// 表单验证规则
rules: {
// 对应的值
name: [{
// 对应的验证方法
validator: checkName,
// 触发条件 "blur"，意思是在用户离开该表单项时进行验证
trigger: 'blur'
}],
pass: [{
validator: validatePass,
trigger: 'blur'
}],
checkPass: [{
validator: validatePass2,
trigger: 'blur'
}]
}
};
},
methods: {
submitForm(formName) {
// 通过 this.$refs.ruleForm.validate 获取这个组件的对象并调用 validate 方法
// validate 方法会自动触发每个表单项的校验规则进行验证，
// 返回一个布尔值，表示是否验证通过。在回调函数中根据验证结果进行相应的处理。
this.$refs[formName].validate((valid) => {
if (valid) {
// 去后端发起登录请求
$.ajax({
url: "login",
data: {
name: this.ruleForm.name,
password: this.ruleForm.pass
},
success() {
// 去后端发起判断是否登录成功
$.ajax({
url: "getSession",
dataType: "JSON",
data: {
key: "user"
},
success(result) {
if (result.userName == vue.ruleForm.name) {
location.href = 'index.html';
}
}
});
}
});
} else {
console.log('输入错误');
return false;
}
});
},
// 跳转到注册页面
registration() {
location.href = 'registration.html';
}
}
})
</script>
</html>