練習：vue.js實現購物車+表單驗證

阿新 • • 發佈：2018-11-05

購物車

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>購物車</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--購物車表格-->
    <table border="1" width="100%">
        <thead>
        <tr 
>
            <!--v_model表示雙向繫結，資料會影響檢視，檢視也會影響資料-->
            <td><input type="checkbox" v-model:checked="checkAll" @click="selectAll()">全選</td>
            <td>編號</td>
            <td>名稱</td>
            <td>價格</td>
            <td> 
數量</td>
            <td>圖片</td>
            <td>移除</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(p, i) in list">
            <td><input type="checkbox"  v-model:checked="p.c" @click="select(i)"></td>
            <td 
>{{i+1}}</td>
            <td>{{p.name}}</td>
            <td>{{p.price}}</td>
            <td>
                <input type="button" value="-" @click="minus(i)">
                <input type="number" v-model:value="p.count" @blur="change(i)">
                <input type="button" value="+" @click="add(i)">
            </td>
            <td><img width="100" :src="'../images/' + p.img"></td>
            <td><input type="button" value="刪除" @click="remove(i)"></td>
        </tr>
        </tbody>
        <tfoot>
        <td colspan="7">總價<span>{{total}}</span></td>
        </tfoot>
    </table>

    <!--商品表格-->
    <table>
        <tbody>
        <tr v-for="(p, i) in products">
            <td>{{p.name}}</td>
            <td>{{p.price}}</td>
            <td><img width="50" :src="'../images/'+p.img"></td>
            <td><input type="button" value="新增至購物車" @click="addGoods(i)"></td>
        </tr>
        </tbody>
    </table>
</div>

<script>
    var vue = new Vue({
        //將檢視與dom元素繫結
        el:"#app",
        //自幾的資料
        data:{
            total:0.0,//總價
            checkAll:true,//全選按鈕
            list:[ /* 購物車商品*/
                {name:"商品1", price:3000.00, img:"5a0cf6bfN92a5a597.jpg",title:"提示1!!!!!!!!!!!!!!", count:1, c:true},
                {name:"商品2", price:4000.00, img:"5a0cf672N3c785b7a.jpg",title:"提示2!!!!!!!!!!!!!!", count:1, c:true},
                {name:"商品3", price:2000.00, img:"5a1f5ed3Nfa577958.jpg",title:"提示3!!!!!!!!!!!!!!", count:1, c:true}
            ],
            products:[//商品列表
                {name:"商品1", price:3000.00, img:"5a0cf6bfN92a5a597.jpg",title:"提示1!!!!!!!!!!!!!!"},
                {name:"商品2", price:4000.00, img:"5a0cf672N3c785b7a.jpg",title:"提示2!!!!!!!!!!!!!!"},
                {name:"商品3", price:2000.00, img:"5a1f5ed3Nfa577958.jpg",title:"提示3!!!!!!!!!!!!!!"},
                {name:"商品4", price:2000.00, img:"5a1f5664Nfa934fac.jpg",title:"提示3!!!!!!!!!!!!!!"},
                {name:"商品5", price:2000.00, img:"5a1fd0c4N73c671f2.jpg",title:"提示3!!!!!!!!!!!!!!"},
                {name:"商品6", price:2000.00, img:"5a2b4fffN4b32a616.jpg",title:"提示3!!!!!!!!!!!!!!"}
            ],

        },
        //用於放我們自己寫的方法
        methods:{
            //修改數量
            change:function(i){
                console.log(this.list[i].count );
                this.sum();
            },
            //全選
            selectAll:function(){
                if(!this.checkAll){//因為點選事件時候狀態和點選完時相反，所以取反
                    for(var i=0;i<this.list.length;i++){
                        this.list[i].c = true;
                    }
                }else{
                    for(var i=0;i<this.list.length;i++){
                        this.list[i].c = false;
                    }
                }
                this.sum();
            },
            //選擇
            select:function(i){
                //console.log(this.list[i].c);
                this.list[i].c = !this.list[i].c;
                //console.log(this.list[i].c);
                this.sum();
                //有一個取消勾選就取消勾選全選按鈕
                if(!this.list[i].c){
                    this.checkAll = false;
                }
            },
            //將當前商品移除
            remove:function (i) {
                this.list.splice(i,1);
                this.sum();
            },
            //增加購買數量
            add:function (i) {
                 this.list[i].count++
                this.sum();
            },
            //將數量減一
            minus:function (i) {
                if(this.list[i].count == 1){

                }else{
                    this.list[i].count--;
                }
                this.sum();
            },
            //計算總價
            sum:function () {
                this.total = 0.0;
                for (var i = 0; i <this.list.length ; i++) {
                    if(this.list[i].c ){//是否勾選
                        this.total += this.list[i].price * this.list[i].count;
                    }
                }
            },
            //新增商品至購物車
            addGoods:function (i) {
                var goods = this.products[i];
                var find = false;
                for (var j = 0; j < this.list.length; j++) {
                    if(this.list[j].name == goods.name){
                        this.list[j].count ++;
                        find = true;
                        break;
                    }
                }
                if(!find){
                    this.list.push({name:goods.name,price:goods.price,img:goods.img,title:goods.title,count:1,c:true});
                }
                this.sum();
            }

        },
        //在vue物件初始化完成後會呼叫mounted方法
        //vue的方法，寫在methods外
        mounted:function () {
            this.sum();
        },

    });
</script>

</body>
</html>

結果展示：

這裡寫圖片描述
表單驗證

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
        td{padding: 10px}
        #uMsg1{color: orangered}
        #pMsg2{color: orangered}
    </style>
</head>
<body>
<div id="app2">
    <form action="">
        <table>
            <tbody>
            <tr>
                <td>使用者名稱</td>
                <td><input type="text" id="username" @blur="usercheck" v-model:value="u.userv"></td>
                <td><span id="uMsg1">{{u.usermsg}}</span></td>
            </tr>
            <tr>
                <td>密碼</td>
                <td><input type="text" id="password" @blur="passwdcheck" v-model:value="u.pswdv"></td>
                <td><span id="pMsg2">{{p.pswdmsg}}</span></td>
            </tr>
            <tr>
                <td><input type="button" :disabled="code.d" id="codeBtn" @click="yan" v-model:value="code.codev" ></td>
                <td><input type="text" id="code"></td>

            </tr>
            <tr>
                <td><input type="checkbox" id="agree"> 同意"服務條款"和"隱私權相關政策"</td>
                <td></td>
                <td><span id="agreeMsg">{{agree.amsg}}</span></td>
            </tr>

            </tbody>

        </table>
        <p><input type="submit" value="提交" @click="tijiao"><span></span></p>
    </form>
</div>
    <script>
        var vue = new Vue({
            el:"#app2",
            data:{
                u:{
                    userv:"",
                    usermsg:"",
                    u_flag:false
                },
                p:{
                    pswdv:"",
                    pswdmsg:"",
                    p_flag:false
                },
                agree:{
                    amsg:"",
                    c:true
                },
                code:{
                    codev:"點選獲取驗證碼",
                    d:false,

                },
                time:10,
            },
            methods:{
                usercheck: function () {
                    if(this.u.userv.length == 0){
                        this.u.usermsg = "賬號不能為空";
                    }else if (this.u.userv.trim().length <2){
                        this.u.usermsg = "賬號長度不得小於2";

                    } else{
                        this.u.u_flag = true;
                        this.u.usermsg = "";
                    }
                },
                passwdcheck: function () {

                    var v= this.u.pswdv.trim();
                    console.log(v);

                    if(v.length == 0){
                        this.p.pswdmsg = "密碼不能為空";
                        console.log(this.p.pswdmsg);
                        return;
                    }
                    var count = 0;

                    if(/[0-9]/.test(v)) {
                        count++; // 計數加1
                    }
                    if(/[A-Za-z]/.test(v)) {
                        count++; // 計數加1
                    }
                    if(/[^0-9A-Za-z]/.test(v)) {
                        count++;
                    }
                    if(count == 3 && v.length>=6) {
                        // 高強度
                        this.p.pswdmsg = "高強度";
                        this.p.p_flag = true;

                    } else if(count == 2 && v.length>=6) {
                        // 中強度
                        this.p.pswdmsg = "中強度";
                        this.p.p_flag = true;

                    } else {
                        // 低強度l
                        this.p.pswdmsg = "低強度";
                        this.p.p_flag = true;
                    }
                },
                tijiao:function () {
                    this.usercheck();
                    this.passwdcheck();
                    if(!this.agree.c){
                        this.agree.amsg="必須同意";
                    }

                    if(this.u.u_flag &this.p.p_flag& this.agree.c){
                        alert("提交成功");
                    }else{
                        alert("提交失敗");
                        event.preventDefault();
                    }
                },
                yan:function () {

                    setTimeout(this.timeOut,500);

                },
                //setTimeout方法使用時不能傳參和加括號，否則就不會有延遲效果
                timeOut:function () {
                    this.time--;
                    this.code.codev = ""+this.time+"秒後重新發送";
                    if(this.time>0){
                        setTimeout(this.timeOut,1000);
                        this.code.d = true;
                    }else{
                        this.code.d = false;
                        this.code.codev = "點選獲取驗證碼"
                        this.time = 10;
                    }
                },




            }

        });
    </script>
</body>
</html>

結果展示：

這裡寫圖片描述

練習：vue.js實現購物車+表單驗證

購物車 <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>購物車</title> <script src="../js/vue.js">

原生js實現form表單序列化

defined json cnblogs 一個 break value 元素 default [0 大家都知道在jquery中有相應的表單序列化的方法： 1.serialize()方法　　格式：var data = $("form").serialize(); 　　功能：

VUE.JS實現購物車功能

add http 功能 hang 總數 tps conf methods htm 購物車是電商必備的功能，可以讓用戶一次性購買多個商品，常見的購物車實現方式有如下幾種： 1. 用戶更新購物車裏的商品後，頁面自動刷新。 2. 使用局部刷新功能，服務器端返回整個購物

(vue.js)element ui 表單重置

pro too DG cef service widget 一個方法 model el-form需要接收一個model，並且需要配合el-form-item一起使用，並且在el-form-item上綁定prop屬性，resetField方法才能好使。 <el-

angular js h5關於表單驗證的例子

checked tro mis scrip att sta error 自定義 account angular js表單驗證 <!DOCTYPE html><html><head lang="en"> <meta charse

【vue】vee-validate 表單驗證詳解

Pre:安裝 npm install [email protected] 內建的校驗規則 after{target} - 比target要大的一個合法日期，格式(DD/MM/YYYY) alpha - 只包

vue中vee-validate表單驗證元件(vux中驗證藉助方式)

vee-validate 安裝 npm install vee-validate --save 引用 import Vue from 'vue'; import VeeValidate from 'vee-validate'; VeeValidate.Validator.

使用FormAuthenticationFilter中的重要方法實現了表單驗證

FormAuthenticationFilter有一個方法 protected boolean onAccessDenied(ServletRequest request, ServletResponse response) throws Exception {

Vue element 自定義表單驗證（手機號舉例）

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">

js正則表單驗證（trim封裝）

筆記見本地js特效day05，規律: 座機驗證：匹配電話號碼:開頭3-4位（首位為0），後面7或8位。 (樞紐城市的座機以0開頭。人口多後8位，人口少後

使用easyUI中的jquery.validate.min.js外掛進行表單驗證並自定義校驗規則

以前使用原生的js或者jQuery寫表單驗證真的好麻煩，使用上面的easyUI外掛配合著ajax真的節省好多程式碼量直接上程式碼<%@page contentType="text/html"%> <%@page pageEncoding="UTF-8"%&g

JavaScript實現簡單表單驗證

在我們進行註冊的時候，把滑鼠點進“請輸入帳號”的輸入框時，輸入框的旁邊會有提示資訊，提示我們要輸入的資訊格式，在我們輸入後滑鼠點進下一個輸入框時，已經填寫過的輸入框會對於我們填入的內容進行判斷，若不符合要求會提示我們重新輸入，大致如下圖所示: 上述功能

vue + element-ui 的表單驗證失效問題

首先先描述寫問題我用的是element-ui 1.4 版本做的一個後臺管理系統，我在對使用者進行新增的時候有個模態框裡面有表單驗證，在修改使用者資料的時候也有一個表單驗證。當我進來先點選了編輯使用者資料的時候，在點選新增使用者，發現表單驗證失效了。我在每一次關閉的時候

分針網—每日分享：Vue.js事件處理器與表單控件綁定

pan alt default efault mage add ref comm 功能事件處理主要通過v-on這個指令來執行。事件監聽及方法處理 1.簡單的可以直接內嵌在頁面。 2.可以通過將方法定義在methods中，然後再v-on中執行 3

Vue.js實現雙向資料繫結（表單自動賦值、表單自動取值）

1、使用Vue.js實現雙向表單資料繫結，例子  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

vue.js 實現 todo list 任務表單

--------------------------------------- 有關點選複選框未完成數字的變化 bug 已經修復新增 clickInput: function(lsi){ var om = this.items.indexOf

vue.js實現單選框、復選框和下拉框

new type 方式避免 -- js實現處理 scrip 按鈕 Vue.js可以很方便的實現數據雙向綁定，所以在處理表單，人機交互方面具有很大的優勢。下邊以單選框、復選框和下拉框為例介紹他們在HTML和Vue.js中的具體實現方式。一、單選框在傳統的HTML

spring mvc:練習：表單驗證(javaConfig配置和註解)

libs pri tor sch pre ted 我們 binding sun 使用Spring表單標簽，表單驗證使用 JSR303 的驗證註解，hibernate-validators，提供了使用MessageSource和訪問靜態資源(如CSS，JavaScript，

實現Vue表單驗證外掛

表單驗證存在於每一個後臺系統中，它承載了許多的邏輯以及狀態。但是，過於某些的場景，會導致程式碼臃腫，如何更好地梳理它，來解決開發的痛點。 1. 前言上篇文章介紹了，如何函式式呼叫表單元件從而減少維護其狀態的方法基於Vue構造器建立Form元件的通用解決方案。現在來介紹下如何處理表單驗證問題，現

flask學習：如何使用flask-wtf實現一個表單

使用flask-wtf實現表單分為以下幾步： 1.安裝flask-wtf擴充套件，並且匯入對應的方法 from flask_wtf import FlaskForm from wtforms import StringField, PasswordField,SubmitField

練習：vue.js實現購物車+表單驗證

結果展示：

結果展示：

相關推薦