js仿手机端九宫格登录功能

原创

mb61b711907d5f4 2021-12-16 14:29:51 ©著作权

文章标签 手势密码 json ide 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者mb61b711907d5f4的原创作品，请联系作者获取转载授权，否则将追究法律责任

　功能及方法逻辑都注释在代码中。所以麻烦大家直接看代码。

　效果如下：

　 js仿手机端九宫格登录功能_json

　话不多说直接上代码：

　js部分：

<script>
    $(function () {
        var urlinfo = window.location.href;
        var UserName = urlinfo.split("_")[1];

//查看用户是否设置手势密码，如果设置调用add，否则调用upup
        $.ajax({
            type: "POST",
            url: "../../Home/Details",
            dataType: 'json',
            anyc: false,
            data: { UserName: UserName },
            success: function (data) {
                if (data.msg == "True") {
                    $("#pass").text(data.pass);
                    alert("请输入手势密码!")
                    add();
                }
                else {
                    alert("请设置手势密码!")
                    upup();
                }
            }
        })
    })
</script>

//设置九宫格

<script>
        $("#gesturepwd").GesturePasswd({
            backgroundColor: "#252736",  //背景色
            color: "#FFFFFF",   //主要的控件颜色
            roundRadii: 25,    //大圆点的半径
            pointRadii: 6, //大圆点被选中时显示的圆心的半径
            space: 30,  //大圆点之间的间隙
            width: 240,   //整个组件的宽度
            height: 240,  //整个组件的高度
            lineColor: "#00aec7",   //用户划出线条的颜色
            zindex: 100  //整个组件的css z-index属性
        });
        ///加载第二个
        function getur() {
            $("#gesturepsa").GesturePasswd({
                backgroundColor: "#252736",  //背景色
                color: "#FFFFFF",   //主要的控件颜色
                roundRadii: 25,    //大圆点的半径
                pointRadii: 6, //大圆点被选中时显示的圆心的半径
                space: 30,  //大圆点之间的间隙
                width: 240,   //整个组件的宽度
                height: 240,  //整个组件的高度
                lineColor: "#00aec7",   //用户划出线条的颜色
                zindex: 100  //整个组件的css z-index属性
            });
        }
        ///设置过手势密码的用户
        function add() {
            $("#gesturepwd").on("hasPasswd", function (e, passwd) {
                var result;
                if (passwd == $("#pass").text()) {
                    result = true;
                }
                else {
                    result = false;
                }
                if (result == true) {
                    $("#gesturepwd").trigger("passwdRight");
                    setTimeout(function () {
                        //密码验证正确后的其他操作，打开新的页面等。。。
                        //alert("密码正确！")
                        $("#gesturepwd").hide();
                        $("#Indexs").show();;
                    }, 500);  //延迟半秒以照顾视觉效果
                }
                else {
                    $("#gesturepwd").trigger("passwdWrong");
                    //密码验证错误后的其他操作。。。
                }
            });
        }
        ///没有设置过手势密码用户
        function upup() {
            ///第一次设置
            $("#gesturepwd").on("hasPasswd", function (e, passwd) {
                $("#pass").text(passwd)
                alert("请再次输入!");
                getur();
                $("#gesturepwd").hide();
                $("#gesturepsa").show();
            });
            ///第二次设置
            Recursive();
        }
        ///递归（循环调用自己）
        function Recursive() {
            $("#gesturepsa").on("hasPasswd", function (e, passwd) {
                var urlinfo = window.location.href;
                var UserName = urlinfo.split("_")[1];
                if (passwd == $("#pass").text()) {
                    $.ajax({
                        type: "POST",
                        url: "../../Home/GrtturePassword",
                        dataType: 'json',
                        anyc: false,
                        data: { GesturePassword: passwd, UserName: UserName },
                        success: function (data) {
                            alert(data);
                            $("#gesturepsa").hide();;
                            $("#Indexs").show();;
                        }
                    })
                }
                else {
                    $("#gesturepsa").trigger("passwdWrong");
                    alert("两次密码不一致，请重新输入!");
                    $("#gesturepsa").remove();
                    $("#gesturepwd").after("<div id='gesturepsa'></div>")
                    getur();
                    Recursive();
                }
            });
        }
    </script>

　html部分：

<div>
<center><br><br>
<div id="gesturepwd"></div> 
<div id="gesturepsa" style="display:none"></div>
</center>
</div>

用户登录时通过业务逻辑层查询数据库，看客户是否设置九宫格密码，如果设置则调用add()方法，未设置则调用upup()方法。

控制器部分：

/// <summary>
        ///设置手势密码
        /// </summary>
        /// <param name="UserName"></param>
        /// <returns></returns>
        [HttpPost]
        public JsonResult GrtturePassword(string GesturePassword, string UserName)
        {
            string msg = string.Empty;
            var model = UserinfoBLL.GetUserName(UserName);
            model.Gesture = true;
            model.GesturePassword = GesturePassword;
            var result = DataBLL.Update(model);
            msg = "手势密码设置成功!";
            return Json(msg);
        }
        /// <summary>
        /// 查询用户是否设置手势密码
        /// </summary>
        /// <param name="UserName"></param>
        /// <returns></returns>
        [HttpPost]
        public JsonResult Details(string UserName)
        {
            string msg = string.Empty;
            var model = UserinfoBLL.GetUserName(UserName);
            msg = model.Gesture.ToString();
            var pass = model.GesturePassword;
            return Json(new{msg, pass});
        }

        #region 后台验证 pandazhang
        /// 验证电话号码的主要代码如下：
        public bool IsTelephone(string str_telephone)
        {
            return System.Text.RegularExpressions.Regex.IsMatch(str_telephone, @"^(\d{3,4}-)?\d{6,8}$");
        }
        ///验证手机号码的主要代码如下：
        public bool IsHandset(string str_handset)
        {
            return System.Text.RegularExpressions.Regex.IsMatch(str_handset, @"^[1]+[3,5,7,8]+\d{9}");
        }
        ///验证身份证号的主要代码如下：
        public bool IsIDcard(string str_idcard)
        {
            return System.Text.RegularExpressions.Regex.IsMatch(str_idcard, @"(^\d{18}$)|(^\d{15}$)");
        }
        ///验证输入为数字的主要代码如下：
        public bool IsNumber(string str_number)
        {
            return System.Text.RegularExpressions.Regex.IsMatch(str_number, @"^[0-9]*$");
        }
        ///验证邮编的主要代码如下：
        public bool IsPostalcode(string str_postalcode)
        {
            return System.Text.RegularExpressions.Regex.IsMatch(str_postalcode, @"^\d{6}$");
        }
        #endregion