jQuery最方便的前端验证方式2种(非空验证与比较验证)

目录

jQuery最方便的前端验证方式2种(非空验证与比较验证)

使用的jQuery地址:

验证需求:

1、非空验证

2、比较验证

jQuery验证列表

字符串长度限制、判断字符长度 、js 限制输入、限制不能输入、textarea 长度限制

判断汉字、判断是否汉字 、只能输入汉字

判断是否输入英文、只能输入英文

只能输入数字,判断数字、验证数字、检测数字、判断是否为数字、只能输入数字

只能输入2位小数的浮点数

只能输入英文字符和数字

使用的jQuery地址:

https://code.jquery.com/jquery-3.4.1.min.js

在线版本的,方式测试。

验证需求:

1、非空验证

当用户没有输入用户名就提交的时候【阻止提交】并提示相应文字。

核心代码:

这里最核心的代码是取消form表单提交操作,这里不建议直接使用onSubmit事件,建议单独加载一遍,使用bind的方式加载事件。

$(function() {

$("form").bind("submit", checkForm);

});

//用于做判断

function checkForm() {

if (参数判断())

return true;

return false;

}

我们在if中逐一的添加想要判断的函数,使用对应的逻辑链接所有的函数返回值。 

function checkUser() {

if ($("#userName").val() == "") {

$("#nameMsg").html("用户名不能为空!!");

$("#userName").focus();

return false;

} else {

$("#nameMsg").html("");

return true; // 验证通过

}

}

完整示例代码:

Document


2、比较验证

比较验证就是比较两个字符串是否相同,一般用于比较两次密码是否输入相同,很常见,也很常用。

jQuery验证列表

字符串长度限制、判断字符长度 、js 限制输入、限制不能输入、textarea 长度限制

源码

判断汉字、判断是否汉字 、只能输入汉字

判断是否输入英文、只能输入英文

只能输入数字,判断数字、验证数字、检测数字、判断是否为数字、只能输入数字

只能输入2位小数的浮点数

只能输入英文字符和数字

精彩链接

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: