ElementUI的form表單驗證事件
阿新 • • 發佈：2019-01-25
用過了elementUi的表單驗證、表單提交之後，個人覺得不是太建議使用。第一：和我們自己寫js的繁瑣程度差不多，第二，還要讀文件增加了學習時間和成本。
廢話不多說，直接上程式碼
html:注意1：程式碼中的：model顧名思義是我們雙向繫結的資料，而ref=”user1”,我們可以把form表單看成是一個類，那麼這個類的物件名字就是我們用ref指定的名字，這個名字會在js中呼叫elementUI的原生態方法中用到，而relus則是我們自定義校驗的規則，定義在js的data裡。
注意2：若要使用校驗則必須在每個中設定prop屬性，該屬性的名字必須的和relus中定義的校驗規則中對應的屬性名字一樣
<el-row>
<!--註冊彈框-->
<el-dialog
class="dialogRegist"
title="加入武林"
:visible.sync="dialogVisible"
width="50%"
center="true"
>
<span>
<el-form js程式碼，在js檔案的data裡定義。
注意1：若是值驗證資料是否為空，那麼{required: true, message: ‘請輸入名諱’, trigger: ‘blur’},就可以，這是elementUI幫我們定義好的。如果有其他的需求，比如手機號，兩次密碼是否一樣等，請看js程式碼，程式碼中都有。
注意2：寫的時候注意rules中每個屬性的格式rules:{屬性名稱1：[{驗證規則1}，{驗證規則2}，，，]，屬性名稱2：[]，，，}
注意3：丟擲驗證提示資訊，只要在回撥函式裡定義一個Error的類即可，如callback(new Error(‘手機號碼格式不正確！’))
注意4：例如如下程式碼中驗證兩次密碼是否正確的時候，當兩次不一樣的時候是一個if，之後還要再有一個else，else裡面就只有一個callback();
即可（我就是被坑在這裡了，沒有寫else，然後校驗不同過可以走到函式裡，但是校驗通過了卻怎麼也進不到函式中去。），因為，你驗證不正確有提示，那你驗證正確了，肯定也有返回值啊，這個返回值就是我們在進行表單提交的時候，的一個boolean型別的返回值，如果rules所有的屬性都驗證通過那麼它會返回一個true的屬性，此時才允許提交，否則不允許表單提交。當有至少1條資料驗證不同過的時候，它會返回一個boolean欄位，和校驗為通過的欄位。
rules: {
name: [
{required: true, message: '請輸入名諱', trigger: 'blur'},
{min: 1, max: 15, message: '長度在 1 到 15 個字元', trigger: 'blur'},
{
validator: function (rule, value, callback) {
$.ajax({
type:"post",
url:app.api.findUserByName,
dateType:"json",
contentType:'application/json',
data:JSON.stringify(app.user1),
success:function(result){
if(!result.success){
callback(new Error(result.data))
} else {
callback(); // 一定要有，這是表單校驗成功後的回撥，會返回一個boolean值，即true
}
}
});
}, trigger: 'blur'
}
],
phone: [
{required: true, message: '請輸入手機號碼', trigger: 'blur'},
{
validator: function (rule, value, callback) {
var MobileRegex = /^[1][3,4,5,7,8][0-9]{9}$/;
if (!MobileRegex.test(value)) {
callback(new Error('手機號碼格式不正確！')) // 這裡錯誤的資訊只要呼叫callback回撥函式，然後在函式裡newerror填寫錯誤資訊即可
} else {
callback(); // 一定要有，這是表單校驗成功後的回撥，會返回一個boolean值，即true
}
}, trigger: 'blur'
}
],
address:[
{required: true, message: '請選擇地址', trigger: 'blur'},
],
password:[
{
validator:function (rule,value,callback) {
if(value === ''){
callback(new Error("請輸入密碼"));
}else{
callback();
}
}
}
],
rePassword:[
{
validator:function (rule,value,callback) {
if(value === ''){
callback(new Error("請輸入密碼"));
}else{
if(value !== app.user1.password){
callback(new Error('兩次密碼輸入不一致'));
}else{
callback();
}
}
}
}
],
},js函式：注意1:上面提到的ref這裡的refs.user1.方法名，其實也不難理解，就是物件點方法名。
注意2：在重置表單的時候，就只能重置rules中校驗的屬性，沒有校驗的不能清空（我們可以自己清空）
注意3：上面說的回撥函式，與這裡的 this.$refs[formName].validate。的validate向對應，回撥函式返回的資料，就是validate函式的引數
// 註冊重置表單
resetForm:function () {
this.$refs['user1'].resetFields(); // 將表單中繫結的變數也清空了
},
// 提交表單
submitForm:function (formName) {
alert("提交...");
this.$refs[formName].validate(function (valid,object) { // 是否校驗成功，和未成功的欄位
console.log(valid);
/*debugger*/
if(valid){
// 表單中所有有驗證的且已經通過的，就可以提交了
if(app.checked){
$.ajax({
type:"post",
url:app.api.addUserUrl,
dateType:"json",
contentType:'application/json',
/*contentType : 'application/x-www-form-urlencoded',*/
data:JSON.stringify(app.user1),
success:function(result){
alert("成功");
}
});
}else{
alert("請同意協議");
}
}
else {
alert("提交失敗");
console.log('error submit!!');
//return false; // 有任何一項沒有通過驗證表單就不能提交
}
});
},controller
@RequestMapping("/ptUser/addPtUser.do")
public void addUser(@RequestBody PtUser user){
ptUserService.insert(user);
}執行截圖
ps：這幾天發燒感冒又是腸胃炎的，身體才是第一位，大家工作的平時還是要好好鍛鍊身體的