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

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

最近闲来无事把以前无聊时开发的小东西拿出来和大家分享下，写的不好的请指出，我会及时修改。谢谢。

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

　效果如下：

　


　话不多说直接上代码：

　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