Similar to this:
Form validation generally has input restrictions and non-null validation:
1. Add * Method 1:
Copy the following style
<style>
.required:before{
content:'* ';
color: red;
}
</style>
Add the class name (mine is required, which can be customized) in the field that needs to be marked with an *.
For example:
Effect:
Method 2 by adding * :
①Add this to the el-form : rules="rules"
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
②Add the parameter ruleForm to the click event of the submit button
<div class="dialog-footer" style="float: right">
<el-button
type="primary"
size="mini"
@click="submitForm('ruleForm')"
>保 存</el-button>
③ Declare in the script:
data(){
return{
ruleForm: {
},
//表单验证
rules: {
vendorName: [
{
required: true, message: "供应商名称不能为空", trigger: "blur" },
],
contact: [
{
required: true, message: "联系人不能为空", trigger: "blur" },
],
contactDetails: [
{
required: true,validator:(rule, value, callback) => checkPhone(rule, value, callback),/* message: "联系电话不能为空", */ trigger: "blur" }
],
mailbox: [
{
required: true, message: "邮箱不能为空", trigger: "blur" },
{
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"],
},
],
accountName: [
{
required: true, message: "开户名不能为空", trigger: "blur" },
],
deposit: [
{
required: true, message: "开户支行不能为空", trigger: "blur" },
],
accountAccount: [
{
required: true, message: "账户不能为空", trigger: "blur" },
],
},
}
}
The effect is as follows:
2. Add regular verification and format verification:
Method 1 : First, encapsulate the verification format in the js
file: the following are two commonly used phone and email regular expressions:
//js页面
/* 电话验证规则 */
export function checkPhone(rule, value, callback){
if (!value) {
return callback(new Error('联系电话不能为空'));
}
setTimeout(() => {
let isPhone = new RegExp("^1[34578][0-90{
9}$]",'i')
if( isPhone.test(value) ){
callback();
}else{
callback(new Error('请输入正确的手机号码'));
}
}, 1000);
}
/* 邮箱验证规则 */
export function checkEmail(rule, value, callback){
if (!value) {
return callback(new Error('邮箱不能为空'));
}
setTimeout(() => {
let isPhone = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$",'i')
if( isPhone.test(value) ){
callback();
}else{
callback(new Error('请输入正确的邮箱格式'));
}
}, 1000);
}
Then on the vue page, introduce the encapsulated function:
import { checkPhone } from “@/utils/burse”;
import { checkEmail } from “@/utils/burse”
<script>
data(){
return
{
// 表单参数
queryParams: {
},
// 表单校验
rules: {
id: [
{
required: true, message: "主键ID不能为空", trigger: "blur" }
],
vendorName: [
{
required: true, message: "供应商名称不能为空", trigger: "blur" }
],
contact: [
{
required: true, message: "联系人不能为空", trigger: "blur" }
],
contactDetails: [
{
required: true, validator:(rule,value,callback)=>checkPhone(rule,value,callback),/*message: "联系电话不能为空",*/ trigger: "blur" }
],
mailbox: [
{
required: true, validator:(rule,value,callback)=>checkEmail(rule,value,callback),/*message: "邮箱不能为空",*/ trigger: "change" }
],
accountName: [
{
required: true, message: "开户名不能为空", trigger: "blur" }
],
deposit: [
{
required: true, message: "开户支行不能为空", trigger: "blur" }
],
accountAccount: [
{
required: true, message: "账户不能为空", trigger: "blur" }
]
},
}
}
</script>
- Several other verifications that are not empty can be used as a reference, not necessary, I record my own learning
Here form parameter my name is queryParams
- Oh, by the way, it seems that there are other ways to add *, but I forgot it for the time being, so I will add it next time I use it. Add:
Method
2: Write regular verification on this page
to add it here, so only write the difference
data(){
//手机格式验证
var checkMobile = (rule, value, callback) => {
const regMobile = /^1[34578]\d{
9}$/;
if (regMobile.test(value)) {
return callback();
}
//返回一个错误提示
callback(new Error("请输入合法的手机号码"));
};
return{
ruleForm: {
},
contactDetails: [
{
required: true, message: "电话不能为空", trigger: "blur" },
{
validator:checkMobile,trigger: "blur"},
],
}
}
The test results are as follows.
Method 2 is a supplement and can be used in conjunction with Method 2 marked with *. It is mainly used for recording when doing projects. It may be confusing, and it will be standardized later