簡單表單驗證的公共函式

2021-07-11 04:15:53 字數 2014 閱讀 8083

首先要新增require=」req」 valid-type=」需要驗證的」

class="forminfo">

姓名*b>

label>

name="staff_name"

class="dfinput"

value=""

type="text"

require="req"

valid-type="normal">

label>

li>

工號*b>

label>

name="user_id"

class="dfinput"

value=""

type="text">

li>

密碼*b>

label>

name="password"

class="dfinput"

value=""

type="text"

require="req"

valid-type="pwd"

style="width: 202px;">

label>

li>

手機號碼*b>

label>

name="phone"

class="dfinput"

value=""

type="text"

require="req"

valid-type="mobi">

label>

li>

聯絡位址*b>

label>

name="addr"

class="dfinput"

value=""

type="text"

require="req"

valid-type="addr">

label>

li>

ul>

底部加乙個script

$("#submit").click(function

());

外部引用的script

;$.fn.extend($/g).test(vstr);

tipstr=ret?(''):("請輸入1-12位數碼!");

break;

case

"mobi":

ret=(/^(1[3|5|8])\d$/g).test(vstr);

tipstr=ret?(''):("請輸入有效手機號碼!");

break;

case

"phone":

ret=(/^[0-9][-][0-9]$/g).test(vstr);

tipstr=ret?(''):("請輸入有效**號碼!");

break;

case

"normal":

ret=(/^\w+$/g).test(vstr);

tipstr=ret?(''):("請輸入內容!");

break;

case

"email":

ret=(/^[\w\.]+@[a-z0-9-]+\.[a-z](\.[a-z])*$/gi).test(vstr);

tipstr=ret?(''):("請輸入有效的郵箱位址!");

break;

case

"addr":

ret=(/^[\w]$/gi).test(vstr);

tipstr=ret?(''):("請輸入6位以上長度位址!");

break;

case

"pwd":

ret=(/^[\w]$/gi).test(vstr);

tipstr=ret?(''):("請輸入6~16位密碼!");

break;

default:

}$(this).next('label').html(tipstr);

return ret;

}});

簡單的表單驗證

效果圖 失焦驗證,點選按鈕再次驗證,驗證通過切換 使用者註冊 input type text name id name v model data.name placeholder 使用者名稱 blur aa span class name msg span input type text name ...

elementui 表單公共方法驗證

做專案時會涉及到很多表單,前台的表單驗證就必不可少,很多公共的驗證,比如 手機號 日期 身份證等,一套寫下來也很費時間,完全可以寫個公共方法common去校驗,vue檔案通過 rules rules.common 呼叫。新建規則 common rules index.js 建議工程目錄中建立comm...

elementui 表單公共方法驗證 二

專案中有了乙個公共的表單驗證後,隨著需求的深入,會有不同的輸入要求,比如a頁面的 name 要求字元只能中文與校驗字串長度,b頁面的則需要必錄加校驗字串長度以及中文。仔細觀察可以看到rules取的都是乙個物件陣列,可以是乙個,可以是多個,只要是物件陣列並符合寫法就能正確校驗,所以我們只需要寫乙個公共...