100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > form表单提交前进行ajax或js验证 校验不通过不提交

form表单提交前进行ajax或js验证 校验不通过不提交

时间:2020-10-18 22:17:24

相关推荐

form表单提交前进行ajax或js验证 校验不通过不提交

在使用form表单进行提交数据前,需要进行数据的校验->表单的校验(如:两次密码输入是否相同)+后台数据的校验(如:账号是否存在),这个时候,如果哪步校验不通过,表单将停止提交,同时避免后台主键唯一的报错。

那么,如何实现呢,首先,需要再form表单处加入οnsubmit=“return 方法名();”

第二步,写方法,下面是我的例子,供大家参考:

<!--js普通校验-->function compare(){var password = document.getElementById("password").value;var password2 = document.getElementById("password2").value;if(password!=password2){alert("两次输入的密码不一致!!");return false;}}

这时候,就遇到了问题,(我的其他文章中有js方法的详细终止方式) ajax不是普通的js方法,不能通过return false;终止运行,如何做呢?

这时候就需要用到一点编程的思考–>我们可以定义变量来返回,发生错误时修改变量即可,代码如下:

function checkDate() {var result = true; //定义返回标识$.ajax({async: false, //设置为同步type: "post",url: "/Mall/Channel/CheckChannelDate",data: {startDate: $("#PayStartTime").val() },success: function (data) {if (data != 'ok') {alert(data);result = false}}});return result; //在ajax方法外层返回true or false}

这里需要特别注意一点:因为ajax是异步的,所以按照常规的写法,即使验证返回了false,表单也会被submit。所以上面的 async: false, 是必须要写的,我尝试过不加,结果js最后才执行ajax方法,结果就不是预期你想要的那个了。

以上!如果有帮到你,点赞、评论、加关注哟!!!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。