jQuery最方便的前端验证方式2种(非空验证与比较验证)
【摘要】 jQuery最方便的前端验证方式2种(非空验证与比较验证)
使用的jQuery地址：
验证需求：
1、非空验证
2、比较验证
jQuery验证列表
字符串长度限制、判断字符长度 、js 限制输入、限制不能输入、textarea 长度限制
判断汉字、判断是否汉字 、只能输入汉字
判断是否输入英文、只能输入英文
只能输入数字，判断数字、验证数字、检测数字、判断是否为数字、只能输入数字
jQuery最方便的前端验证方式2种(非空验证与比较验证)
目录
字符串长度限制、判断字符长度 、js 限制输入、限制不能输入、textarea 长度限制
只能输入数字，判断数字、验证数字、检测数字、判断是否为数字、只能输入数字
使用的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("<font color='red'>用户名不能为空！！</font>");
$("#userName").focus();
return false;
} else {
$("#nameMsg").html("");
return true; // 验证通过
}
}完整示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<form action="index.html" method="get">
<input type="text" id="userName" placeholder="请输入用户名" /><span id="nameMsg"></span>
<hr/>
<input type="submit" value="提交验证" />
</form>
<script type="text/javascript">
$(function() {
$("form").bind("submit", checkForm);
});
function checkForm() {
if (checkUser())
return true;
return false;
}
function checkUser() {
if ($("#userName").val() == "") {
$("#nameMsg").html("<font color='red'>用户名不能为空！！</font>");
$("#userName").focus();
return false;
} else {
$("#nameMsg").html("");
return true; // 验证通过
}
}
</script>
</body>
</html>2、比较验证
比较验证就是比较两个字符串是否相同，一般用于比较两次密码是否输入相同，很常见，也很常用。
jQuery验证列表
字符串长度限制、判断字符长度 、js 限制输入、限制不能输入、textarea 长度限制
源码
<script>
function test() {
if (document.a.b.value.length > 50) {
alert("不能超过 50 个字符！");
document.a.b.focus();
return false;
}
}
</script>
<form name="a" onsubmit="return test()">
<textarea name="b" cols="40" wrap="VIRTUAL" rows="6"></textarea>
<input type="submit" name="Submit" value="check">
</form>判断汉字、判断是否汉字 、只能输入汉字
<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" />判断是否输入英文、只能输入英文
<input onkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')" />只能输入数字，判断数字、验证数字、检测数字、判断是否为数字、只能输入数字
<input onkeyup="this.value=this.value.replace(/\D/g,'')" />只能输入2位小数的浮点数
<input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" />只能输入英文字符和数字
<input onkeyup="value=value.replace(/[d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[d]/g,''))" maxlength=10 name="Numbers">
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）