jQuery最方便的前端验证方式2种(非空验证与比较验证)
2023-09-14 09:05:03 时间
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">
相关文章
- jquery学习以及下载链接
- 前端基础之jquery
- jquery优化轮播图2
- 第一百八十一节,jQuery-UI,知问前端--自动补全 UI--邮箱自动补全
- 第一百七十八节,jQuery-UI,知问前端--对话框 UI
- [ Talk is Cheap Show me the CODE ] : jQuery Mobile工具栏
- 前端-jQuery-事件操作
- 前端-jQuery-基本介绍
- jquery中input和select中option选中和取消选中
- open-flash-chart + PHP + jQuery实例
- jQuery插件定义
- jQuery-鼠标经过激活效果
- jQuery.ready in CRM Fiori Opportunity Application
- JQuery 圆形进度条demo(整理)
- web前端jQuery,jsp,jstl等开发小细节分享
- jQuery UI API 类别 - 主题(Theming)
- Jquery操作层级选择器
- python web py入门(50)- jQuery - 输入内容的检查
- 关于Jquery中ajax方法data参数用法的总结
- jquery.js和jquery.min.js的区别介绍