これと同様です:
フォーム検証には通常、入力制限と非 null 検証があります。
1. * を追加します。方法 1:
次のスタイルをコピーします。
<style>
.required:before{
content:'* ';
color: red;
}
</style>
* でマークする必要があるフィールドにクラス名 (私のクラス名は必須で、カスタマイズ可能) を追加します。
例:
効果：
* を追加する方法 2 :
①el-formにこれを追加します: rules="rules"
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
②送信ボタンのクリックイベントにパラメータruleFormを追加
<div class="dialog-footer" style="float: right">
<el-button
type="primary"
size="mini"
@click="submitForm('ruleForm')"
>保 存</el-button>
③ スクリプト内で次のように宣言します。
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" },
],
},
}
}
効果は次のとおりです。
2. 通常の検証とフォーマット検証を追加します。
方法 1 : まず、jsファイルに検証フォーマットをカプセル化します。
以下は、一般的に使用される電話および電子メールの 2 つの正規表現です。
//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);
}
次に、vue ページで、カプセル化された関数を導入します。
import { checkPhone } から “@/utils/burse”;
import { checkEmail } から “@/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>
- 空ではない他のいくつかの検証は参考として使用できますが、必須ではありません。私自身の学習を記録します。
ここでフォームパラメータの私の名前はqueryParamsです
- あ、ちなみに*を付ける方法は他にもあるようですが、とりあえず忘れてたので次回使うときに追記します 追加：方法2：このページに定期検証を書い
て
追加し
ますここでは違いだけを書きます
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"},
],
}
}
テスト結果は以下の通りです
方法 2 は補足であり、* の方法 2 と併用できます 主にプロジェクト実行時の記録に使用されます わかりにくいかもしれません、後で標準化されます