Similar a esto:
la validación de formularios generalmente tiene restricciones de entrada y validación no nula:
1. Agregue * Método 1:
copie el siguiente estilo
<style>
.required:before{
content:'* ';
color: red;
}
</style>
Agregue el nombre de la clase en el campo que debe marcarse con un * (se requiere el mío, que se puede personalizar)
Por ejemplo:
Efecto:
Método 2 agregando * :
①Agregue esto en forma el : rules="rules"
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
② Agregue el parámetro ruleForm al evento de clic del botón Enviar
<div class="dialog-footer" style="float: right">
<el-button
type="primary"
size="mini"
@click="submitForm('ruleForm')"
>保 存</el-button>
③ Declarar en el 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" },
],
},
}
}
El efecto es el siguiente:
2. Agregue verificación regular y verificación de formato:
Método 1 : Primero, encapsule el formato de verificación en el archivo js
: Las siguientes son dos expresiones regulares de teléfono y correo electrónico de uso común:
//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);
}
Luego, en la página vue, introduzca la función encapsulada:
importar { checkPhone } desde “@/utils/burse”;
importar { checkEmail } desde "@/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>
- Varias otras verificaciones que no están vacías se pueden usar como referencia, no es necesario, registro mi propio aprendizaje
Aquí el parámetro de formulario mi nombre es queryParams
- Oh, por cierto, parece que hay otras formas de agregar *, pero lo olvidé por el momento, así que lo agregaré la próxima vez que lo use. Agregar: Método 2: Escriba una verificación regular en
esta
página para
agregar aquí, así que solo escribe la diferencia
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"},
],
}
}
Los resultados de la prueba son los siguientes.
El Método 2 es un complemento y se puede usar junto con el Método 2 marcado con *. Se usa principalmente para grabar cuando se hacen proyectos. Puede ser confuso y se estandarizará más adelante.