vue批量验证提交表单的数据是否合规

<div class="cnblogs_code">

<span style="color: #0000ff"><<span style="color: #800000">head<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">meta <span style="color: #ff0000">charset<span style="color: #0000ff">="UTF-8"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">meta <span style="color: #ff0000">name<span style="color: #0000ff">="viewport"<span style="color: #ff0000"> content<span style="color: #0000ff">="width=device-width,initial-scale=1.0"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">meta <span style="color: #ff0000">http-equiv<span style="color: #0000ff">="X-UA-Compatible"<span style="color: #ff0000"> content<span style="color: #0000ff">="ie=edge"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">title<span style="color: #0000ff">>vue批量判定数据是否合规<span style="color: #0000ff"></<span style="color: #800000">title<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">head<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">script <span style="color: #ff0000">src<span style="color: #0000ff">="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"<span style="color: #0000ff">></<span style="color: #800000">script<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">body<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">id<span style="color: #0000ff">="app"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">p<span style="color: #0000ff">>主要用于数据的提交，批量判定是否有数据是否和规则<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">ul<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">li<span style="color: #0000ff">><span style="color: #000000">

姓名：

<span style="color: #0000ff"><<span style="color: #800000">input <span style="color: #ff0000">type<span style="color: #0000ff">="text"<span style="color: #ff0000"> v-model<span style="color: #0000ff">="name"<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">li<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">li<span style="color: #0000ff">><span style="color: #000000">

年龄：

<span style="color: #0000ff"><<span style="color: #800000">input <span style="color: #ff0000">type<span style="color: #0000ff">="number"<span style="color: #ff0000"> v-model<span style="color: #0000ff">="age"<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">li<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">li<span style="color: #0000ff">><span style="color: #000000">

体重：

<span style="color: #0000ff"><<span style="color: #800000">input <span style="color: #ff0000">type<span style="color: #0000ff">="number"<span style="color: #ff0000"> v-model<span style="color: #0000ff">="weight"<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">li<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">li<span style="color: #0000ff">><span style="color: #000000">

手机：

<span style="color: #0000ff"><<span style="color: #800000">input <span style="color: #ff0000">type<span style="color: #0000ff">="phone"<span style="color: #ff0000"> v-model<span style="color: #0000ff">="phone"<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">li<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">li<span style="color: #0000ff">><span style="color: #000000">

邮箱：

<span style="color: #0000ff"><<span style="color: #800000">input <span style="color: #ff0000">type<span style="color: #0000ff">="email"<span style="color: #ff0000"> v-model<span style="color: #0000ff">="email"<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">li<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">li<span style="color: #0000ff">><span style="color: #000000">

地址：

<span style="color: #0000ff"><<span style="color: #800000">input <span style="color: #ff0000">type<span style="color: #0000ff">="text"<span style="color: #ff0000"> v-model<span style="color: #0000ff">="address"<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">li<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">ul<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">button <span style="color: #ff0000">@click<span style="color: #0000ff">="btn()"<span style="color: #0000ff">>点击测试数据是否正确<span style="color: #0000ff"></<span style="color: #800000">button<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">div<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">script<span style="color: #0000ff">>

<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> app <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #0000ff">new<span style="background-color: #f5f5f5; color: #000000"> Vue({

el: <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">#app<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,data: {

name: <span style="background-color: #f5f5f5; color: #000000">''<span style="background-color: #f5f5f5; color: #000000">,age: <span style="background-color: #f5f5f5; color: #000000">''<span style="background-color: #f5f5f5; color: #000000">,weight: <span style="background-color: #f5f5f5; color: #000000">''<span style="background-color: #f5f5f5; color: #000000">,phone: <span style="background-color: #f5f5f5; color: #000000">''<span style="background-color: #f5f5f5; color: #000000">,email: <span style="background-color: #f5f5f5; color: #000000">''<span style="background-color: #f5f5f5; color: #000000">,address: <span style="background-color: #f5f5f5; color: #000000">''<span style="background-color: #f5f5f5; color: #000000">

},methods: {

<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000"> 判定是否合规

<span style="background-color: #f5f5f5; color: #000000">                have_empty: <span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000"> (arr) {

<span style="background-color: #f5f5f5; color: #0000ff">for<span style="background-color: #f5f5f5; color: #000000"> (let key <span style="background-color: #f5f5f5; color: #0000ff">in<span style="background-color: #f5f5f5; color: #000000"> arr) {

console.log(arr[key].inspect)

<span style="background-color: #f5f5f5; color: #0000ff">if<span style="background-color: #f5f5f5; color: #000000"> (arr[key].inspect) { <span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000"> 有值并且有规则执行验证

<span style="background-color: #f5f5f5; color: #0000ff">if<span style="background-color: #f5f5f5; color: #000000">(arr[key].reg){

let reg <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #0000ff">new<span style="background-color: #f5f5f5; color: #000000"> RegExp(arr[key].reg)

<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> red_end <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> reg.test(arr[key].inspect)

<span style="background-color: #f5f5f5; color: #0000ff">if<span style="background-color: #f5f5f5; color: #000000">( <span style="background-color: #f5f5f5; color: #000000">!<span style="background-color: #f5f5f5; color: #000000">red_end ){

alert(<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">请输入正确的<span style="background-color: #f5f5f5; color: #000000">' <span style="background-color: #f5f5f5; color: #000000">+<span style="background-color: #f5f5f5; color: #000000"> arr[key].msg)

<span style="background-color: #f5f5f5; color: #0000ff">return <span style="background-color: #f5f5f5; color: #0000ff">false<span style="background-color: #f5f5f5; color: #000000">

}

}

}<span style="background-color: #f5f5f5; color: #0000ff">else<span style="background-color: #f5f5f5; color: #000000">{ <span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000"> 没值返回 fasle

<span style="background-color: #f5f5f5; color: #000000">                            alert(<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">请输入<span style="background-color: #f5f5f5; color: #000000">' <span style="background-color: #f5f5f5; color: #000000">+<span style="background-color: #f5f5f5; color: #000000"> arr[key].msg)

<span style="background-color: #f5f5f5; color: #0000ff">return <span style="background-color: #f5f5f5; color: #0000ff">false<span style="background-color: #f5f5f5; color: #000000">

}

}

<span style="background-color: #f5f5f5; color: #0000ff">return <span style="background-color: #f5f5f5; color: #0000ff">true<span style="background-color: #f5f5f5; color: #000000">
            },</span><span style="background-color: #f5f5f5; color: #008000"&gt;//</span><span style="background-color: #f5f5f5; color: #008000"&gt; 判定规则前传入参数</span>
<span style="background-color: #f5f5f5; color: #000000">                inspect: <span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000"> () {

<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> end <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #0000ff">this<span style="background-color: #f5f5f5; color: #000000">.haveempty([

{

inspect: <span style="background-color: #f5f5f5; color: #0000ff">this<span style="background-color: #f5f5f5; color: #000000">.name,<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000"> 待检测的字段

<span style="background-color: #f5f5f5; color: #000000">                            msg: <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">姓名<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000"> 空值返回的提示

<span style="background-color: #f5f5f5; color: #000000">                        },{

inspect: <span style="background-color: #f5f5f5; color: #0000ff">this<span style="background-color: #f5f5f5; color: #000000">.age,msg: <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">年龄<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">

},{

inspect: <span style="background-color: #f5f5f5; color: #0000ff">this<span style="background-color: #f5f5f5; color: #000000">.weight,msg: <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">体重<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">

},{

inspect: <span style="background-color: #f5f5f5; color: #0000ff">this<span style="background-color: #f5f5f5; color: #000000">.phone,msg: <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">手机号<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,reg: <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">^[1][3,4,5,7,8][0-9]{9}$<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">

},{

inspect: <span style="background-color: #f5f5f5; color: #0000ff">this<span style="background-color: #f5f5f5; color: #000000">.email,msg: <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">邮箱<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,reg: <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">^[a-z0-9]+([.-][a-z0-9])@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">

},{

inspect: <span style="background-color: #f5f5f5; color: #0000ff">this<span style="background-color: #f5f5f5; color: #000000">.address,msg: <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">地址<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">

}

])

console.log(end)

<span style="background-color: #f5f5f5; color: #0000ff">if<span style="background-color: #f5f5f5; color: #000000"> (<span style="background-color: #f5f5f5; color: #000000">!<span style="background-color: #f5f5f5; color: #000000">end) <span style="background-color: #f5f5f5; color: #0000ff">return <span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000"> 判定验证结果

<span style="background-color: #f5f5f5; color: #000000">                    console.log(<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">执行提交的ajax函数<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">)
            },btn: </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt; () {
                </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;this</span><span style="background-color: #f5f5f5; color: #000000"&gt;.inspect()
            }

        },mounted () {

        },})
</span><span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"></<span style="color: #800000">body<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!