Vue +要素コンポーネント（フォームフォーム）
フォームの確認は、主に登録またはログインに使用されます
1.まず、フォームフォームを追加する必要があります
1.要素コンポーネントを開きます-フォームフォームをインポートします（事前に要素コンポーネントをVUEにインストールする必要があります）
<el-form
:model="addForm"
:rules="addFormRules"
ref="addFormRef"
label-width="70px"
status-icon
>
<el-form-item label="用户名" prop="username">
<el-input v-model="addForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="addForm.password"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="addForm.email"></el-input>
</el-form-item>
<el-form-item label="手机" prop="mobile">
<el-input v-model="addForm.mobile"></el-input>
</el-form-item>
</el-form>
<!-- 底部区域 -->
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
<el-button @click="addDialogVisible = false" style="margin-left:20%">取 消</el-button>
</span>
JS
//添加用户的表单数据
addForm: {
username: "",
password: "",
email: "",
mobile: ""
},
//添加表单的验证规则对象
addFormRules: {
username: [
{
required: true,
message: "请输入用户名",
trigger: "blur"
},
{
min: 3,
max: 10,
message: "用户名的长度在3-10个字符之间",
trigger: "blur"
}
],
password: [
{
required: true,
message: "请输入密码",
trigger: "blur"
},
{
min: 6,
max: 15,
message: "密码的长度在-15个字符之间",
trigger: "blur"
}
],
email: [
{
required: true,
message: "请输入邮箱",
trigger: "blur"
},
{
validator: checkEmail,
trigger: "blur"
}
],
mobile: [
{
required: true,
message: "请输入手机号",
trigger: "blur"
},
{
validator: checkMobile,
trigger: "blur"
}
]
}
携帯電話番号とメールアドレスの確認では、正規表現を使用して合法かどうかを判断する必要があります
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) => {
// 验证手机号的正则表达式
const regMobile = /^([0|86|17951])?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
if (regMobile.test(value)) {
return cb();
}
cb(new Error("请输入合法的手机号"));
};
}
完全なJSコード
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) => {
// 验证手机号的正则表达式
const regMobile = /^([0|86|17951])?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
if (regMobile.test(value)) {
return cb();
}
cb(new Error("请输入合法的手机号"));
};
return{
//添加用户的表单数据
addForm: {
username: "",
password: "",
email: "",
mobile: ""
},
//添加表单的验证规则对象
addFormRules: {
username: [
{
required: true,
message: "请输入用户名",
trigger: "blur"
},
{
min: 3,
max: 10,
message: "用户名的长度在3-10个字符之间",
trigger: "blur"
}
],
password: [
{
required: true,
message: "请输入密码",
trigger: "blur"
},
{
min: 6,
max: 15,
message: "密码的长度在-15个字符之间",
trigger: "blur"
}
],
email: [
{
required: true,
message: "请输入邮箱",
trigger: "blur"
},
{
validator: checkEmail,
trigger: "blur"
}
],
mobile: [
{
required: true,
message: "请输入手机号",
trigger: "blur"
},
{
validator: checkMobile,
trigger: "blur"
}
]
}
}
}
