重拾MVC——第二天：Vue学习与即时密码格式验证-优快云博客

博主复习MVC第二天准备做后台管理，学习了前端的Vue，推荐了学习网站。介绍了引用Vue、动态获取password、用v-model绑定数据、在computed中用正则表达式进行密码格式校验等操作，还回顾了HTML DOM，提到computed有缓存，methods每次都会调用。

今天是复习MVC的第二天，准备自己写一个后台管理，然后慢慢写大，做全。

个人感觉做 Web 的，前端知识是必备的，所有今天学习了一下 Vue，很多人用这个，我以前没有用过，今天把它补起来。

比较了各个学习 Vue 的地方，感觉官方文档讲得很详细，推荐一个学习的网站，将 Vue 讲的很清楚：http://how2j.cn/k/vuejs/vuejs-start/1744.html

这个网站主要是学 Java 的，不过 Java 部分我还没怎么看，只是大致浏览了一下前端部分，感觉很不错，站主很用心。

不多说，直接上代码：

<body>
    <div class="box">
        <div id="header">
            <h1>LOGIN</h1>
        </div>
        <form id="adminform">
            <div class="group">
                <input class="inputMaterial" type="text" v-model="usercode" required>
                <span class="highlight"></span>
                <span class="bar"></span>
                <label>Usercode</label>
            </div>
            <div class="group">
                <input class="inputMaterial" type="password" v-model="password" required>
                <span class="highlight"></span>
                <span class="bar"></span>
                <label>Password</label>
                <p class="vm_message"> {{ passwordVerification }}</p>
            </div>
            <button id="buttonlogintoregister" v-on:click='btnLogin'>Login</button>
        </form>
        <div id="footer-box"><p class="footer-text">Not a member?<span class="sign-up"> Sign up now</span></p></div>
    </div>
    <script>
        var data = {usercode:"",password:"",message:""}

        var vm = new Vue({
            el: "#adminform",
            //data: {
            //    usercode: '',
            //    password: '',
            //},
            data: data,
            computed: {
                passwordVerification() {//动态验证                    
                    //6-12位，包含大写字母，小写字母、数字和下划线
                    //var reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{6,12}$/;

                    //6-12位，至少包括一个大写字母、一个小写字母、一个数字、不能有特殊字符
                    var reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?!.*?[#?!@@$%^&*-]).{6,12}$/;
                    if (data.password == "")
                        return "";
                    else if (!reg.test(data.password))
                        return message = "6-12位，包含大小写字母\数字,不能有特殊字符";
                },
            },
            methods: {
            },
        })

    </script>
</body>

　　第一步，引用 Vue，我是下载到本地了的；

　　第二步，我这里动态获取 password ，所以我定义了个 data：

var data = {usercode:"",password:"",message:""}

　　然后 new Vue 里面获取了 form 表单：

el: "#adminform",

　　因为默认 input 是空，所以直接利用利用 v-model 与 data中的初始数据进行绑定，随着输入框的变化，data 中的数据也会发生变化，所以直接在 computed 中进行动态验证：

passwordVerification() {//动态验证                    
                    //6-12位，包含大写字母，小写字母、数字和下划线
                    //var reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{6,12}$/;

                    //6-12位，至少包括一个大写字母、一个小写字母、一个数字、不能有除开特殊字符
                    var reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?!.*?[#?!@@$%^&*-]).{6,12}$/;
                    if (data.password == "")
                        return "";
                    else if (!reg.test(data.password))
                        return message = "6-12位，包含大小写字母\数字,不能有特殊字符";
                },

　　这里我用的正则表达式来进行密码格式校验，让密码在6-12位中，且至少包括一个大写字母、一个小写字母、一个数字、不能有特殊字符

　　根据判断会返回不同的值进行显示，可以把这里的判断写复杂一点。

　　总结：今天主要就是去复习前端知识了，除了学习了一手 Vue 外，还回顾了一下 HTML DOM。感觉自己进度不够快，毕竟是边学边用，稳一点好。

　　这里也可以写成methods：

　　body:

                <p class="vm_message"> {{ passwordVerification1() }}</p> @*methods写法*@

　　script:

            methods: {
                passwordVerification1() {
                    var reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?!.*?[#?!@@$%^&*-]).{6,12}$/;
                    if (data.password == "")
                        return "";
                    else if (!reg.test(data.password))
                        return message = "6-12位，包含大小写字母\数字,不能有特殊字符";
                }

            },

　　补充：computed 是有缓存的，只要计算前的数值没有变化，就会直接返回以前计算出来的值，而不会再次计算。这样如果是复杂计算，就会节约不少时间。
　　　　　而methods每次都会调用

转载于:https://www.cnblogs.com/Soaring-Free/p/11178942.html