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

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; // 验证通过

}

}

完整示例代码：

2、比较验证

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

jQuery验证列表

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

源码

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

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

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

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

只能输入英文字符和数字

精彩链接

 您阅读本篇文章共花了： 

大家都在找：

前端：前端和后端的区别

javascript：javascript代码

jquery：jquery选择器

html：html5是什么