Jquery表单验证失败后不提交的解决方法

针对当前热议的Jquery表单验证失败后不提交的解决方法话题 ,我们进行了深入调研和信息整合,力求为您呈现全面客观的内容分析 。

前言

这个问题经过我的整理发现是对事件的认识和js的结构没有了解清楚,return的false在onclick事件中没有返回 ,所以onclick之后只是显示了false值。

解决方法示例

就是一个普通的表单验证提交:

<input

type="botton"

</code><code>onclick="javascript:checkUserInfo()"</code><code>/>

checkUserInfo()是一个jquery验证方法,错误返回false。

问题在于:返回false后表单提交 。

发现只需要把:

onclick="checkUserInfo()"

改成:

onclick="return

checkUserInfo()"

返回false的时候就可以阻止表单提交了。

总结

以上就是Jquery表单验证失败后不提交的全部内容,或许很多人一看就明白了如何操作 ,但是避免不了因为工作的繁忙而忘记 ,希望这篇文章对大家能有一定的帮助,如果有疑问大家可以留言交流。

jQuery表单验证通过后success: function()移除CSS样式问题

做项目时前台表单验证用了jquery.validation插件 。

发现在做正则表达式验证时没有参数设置可以使用,需要一个个添加方法 ,比较麻烦 。

就做了一个简单的分装,也总结了一些正则表达式。

/**

* @anthor ycf

* @date 1017/11/3

*

* 本js是对jquery.validator的自定义方法的封装

* 只能用于正则表达验证

* 页面必须调用jquery.validator.js

* 共两个方法

* regular 只添加一个正则自定义函数

* regulararr 批量导入,传入对象即可。

* 具体信息请看页面展示及函数参数说明

* 以下是一些常用的正则表达式 。

*/

//用户名验证

var usernameExp = /^[a-zA-Z0-9_-]{4,16}$/;

//姓名验证

var nameExp = /^[\u4E00-\u9FA5A-Za-z]+$/;

//密码验证

var pwdExp = /^[0-9a-zA-Z_#!@$%^&*]{6,16}$/;

//年龄验证

var ageExp = /^(?:0|[1-9][0-9]?|120)$/;

//邮箱验证

var emailExp = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;

//固定电话验证

var telExp = /^0\d{2,3}-\d{7,8}(-\d{1,6})?$/;

//手机号码验证

var phoneExp = /^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/;

//英文名验证

var enameExp = /^[a-zA-Z]+$/;

//邮政编码验证

var postalcodeExp = /^[0-9][0-9]{5}$/;

//QQ验证

var qqExp = /^\d{5,10}$/;

//非法字符验证

var ffzfExp = /[@#\$%\^&\*]+/g;

//IP验证

var ipExp = /((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))/;

//非负整数验证

var ffzsExp = /^(0|[1-9]\d*)$/;

//正负小数验证

var zfxsExp = /^[+-]?\d*\.\d{1,3}$/;

//正负整数和小数验证

var zfzshxsExp = /^(-)?\d+(\.\d+)?$/;

//身份证号验证

var idcardExp = /^[1-9][0-9]{5}(19[0-9]{2}|200[0-9]|201[0-9]|202[0-9]|203[0-9])(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])[0-9]{3}[0-9xX]$/i;

//限制输入

var limitExp = /^((?!test).)*$/; //不能输入包含test的字符串

/**

* 自定义正则匹配方法

* @param funName 自定义方法名

* @param Exp 正则表达式

* @anthor ycf

*/

function regular(funName,Exp){

jQuery.validator.addMethod(funName, function(value, element) {

return this.optional(element) || Exp.test(value);

}, "不通过");

}

/**

* 批量添加自定义正则匹配方法

* @param objExp 对象

* 例如{ "postalcodeCheck":postalcodeExp}

*

* @anthor ycf

*/

function regularArr(objExp){

$.each(objExp, function(i) {

jQuery.validator.addMethod(i, function(value, element) {

return this.optional(element) || objExp[i].test(value);

}, "不通过");

});

}

这样在前台js里只需要申明一个对象 ,并引入这个js文件就行了。希望能帮到大家。

建议你将错误的样式定义成一个class,错误时直接给元素添加class,成功时移除class就行了:

.MyError?{

padding:2px?2px;

background-color:yellow;

color:#333;

border:1px?solid?orange;

vertical-align:middle

}

验证失败时:

element.addClass("MyError");

验证成功时:

element.removeClass("MyError");

关于Jquery表单验证失败后不提交的解决方法的相关内容介绍到此告一段落 ,若这些信息对您有所启发,欢迎持续关注本站获取更多优质内容 。

(3)

猜你喜欢

发表回复

本站作者才能评论

评论列表(3条)

  • 宏阔号的头像
    宏阔号 2026年08月28日

    我是宏阔号的签约作者“宏阔号”

  • 宏阔号
    宏阔号 2026年08月28日

    本文概览:针对当前热议的Jquery表单验证失败后不提交的解决方法话题,我们进行了深入调研和信息整合,力求为您呈现全面客观的内容分析。前言这个问题经过我的整理发现是对事件的认识和js的...

  • 宏阔号
    用户082804 2026年08月28日

    文章不错《Jquery表单验证失败后不提交的解决方法》内容很有帮助

联系我们:

邮件:宏阔号@gmail.com

工作时间:周一至周五,9:30-17:30,节假日休息

关注微信