1.今天要做一个手机验证码验证的功能。需求是前端页面点击发送 短信验证码,后台接收后通过ajax返回到前端,之后前端在提交时候进行验证。思路很简单,不过做的过程还是学到不少的东西、
1.ajax请求后返回
原因是我后台返回的时候没有加上:
@ResponseBody
注解。加上后返回的数据是json字符串,但是js只能操作json对象。需要把json字符串转为json对象。
一般的有三种方式
1.JSON.parse();如
var json = \'{"key":"value","jian":"zhi"}\';
var obj =JSON.parse(json);
console.log(obj); //控制台返回
Object console.log(obj.key); //控制台返回
value console.log(obj.jian); //控制台返回
2.通过eval 函数 如:
var json = \'{"key":"value","jian":"zhi"}\';
var obj = eval("(" + json + ")");
console.log(obj); //控制台返回 Object
console.log(obj.key); //控制台返回 value
console.log(obj.jian); //控制台返回 zhi
二者区别是evel方法 会执行json字符串里的代码。比如下面的value 会返回2
var value = 1;
var jsonstr = \'{"name":"jifeng","company":"taobao","value":++value}\';
var json2 = JSON.parse(jsonstr);
console.log(json2);
console.log(\'value: \'+ value);
3.调用jquery的 $.parseJSON(string);用法同上。
参考:http://blog.csdn.net/qq_31655965/article/details/52037197
2.form表单提交前验证。
如果form表单是submit,则submit时候会直接提交,而不会验证。然后网上搜了很多,说是默认的submit是直接提交,可以使用button来代替onclick
this.form.submit(); //直接提交表单
this.form.onsubmit(); //调用form的onsubmit方法
this.form.fireEvent(\'onsubmit\'); //同上,
条型码 | |
然后自己测试后发现这种方式不行,虽然可以再提交前验证,但是当验证过了之后,发现提交没反应了。。。
参考:http://www.cnblogs.com/jiechn/p/3979433.html
然后又重新用jquery来下了下发现可以。
$(document).ready(function ()
{
$(\'#next\').click(function()
{
var code = $("#verifyCode").val();
if(code == null || code == ""){
alert("请输入手机验证码");
return false;
}else if(vcode == null || vcode == "") {
alert("请发送手机验证码");
return false;
}else if(code != vcode){
alert("验证码不正确");
return false;
}
$(\'#form1\').submit();
});
});
亲测这种方式可以。