//一个工具的类,用来校验表单中一些常用的表单元素
var errMsg = {
/*
requied:{
//校验必填字段
msg: "this filed is required!",
test: function(obj,load){
return obj.value.length>0||load||object.value==object.defaultValue;
}
}, */
username:{
msg:"Not a valid username,it must be larger 5!",
test:function(obj){
return obj.value.length>5;
}
},
password:{
msg:"Not a valid password!Must be larger 5",
test:function(obj){
return obj.value.length>5;
}
},
email:{
msg:"Not a valid emial address!",
//校验电子邮件的格式
test:function(obj){
return !obj.value||/^[z-z0-9A-Z_+.-]+\@([a-z0-9-]+\.)+[a-z0=9]{2-4}$/i.test(obj.value);
}
},
//确保字段内容符合MM/DD/YYYY的格式
date:{
msg:"Not a valid date!",
test:function(obj){
return !obj.value||/^\d{2}\/\d{2}\/\d{2,4}$/.test(obj.value);
}
},
//确保字段内容是电话号码并将其自动格式化
phone:{
msg:"Not a valid phone number!",
test:function(obj){
//判断是否符合电话号码的要求
var m = /(\d{3}).*(\d{3}).*(\d{4})/.exec(obj.value);
//检查是否符合自己约定的格式 (123) 456-7890
if(m) {
obj.value="("+m[1]+")"+m[2]+"-"+m[3];
return !obj.value||m;
}
}
},
//确保字段内容是一个正确的URL
url: {
msg:"Not a valid URL!",
test:function(obj){
//确保有文本输入,而且不是默认的http://文本
/^https?:\/\/([a-z0-9-]+\.)+[a-z0-9]{2,4}.*$/.test(obj.value);
}
}
};
/**
* @param form - 表单元素的一个引用
* @param load - 是一个bool值,确定是否在页面加载时执行还是动态执行
*/
function validateForm(form,load){
var valid = true;
// alert(form.elements[0]);
// for(var i = 0;i<form.elements.length;i++){
// alert(form.elements[i].id+"-"+form.elements[i].className);
// }
for(var i = 0;i<form.elements.length;i++){
//先隐藏任何错误信息
hideErrors(form.elements[i]);
//检查字段是否包含正确的内容
alert(form.elements[i].id+"-"+form.elements[i].className);
if(!validateField(form.elements[i],load))
{
valid = false;
alert(valid);
}
}
//如果字段是不正确的内容返回false,否则返回true
return valid;
}
/**
* 验证单个表单字段的内容
*/
function validateField(element,load){
//定义个数组用来存储错误信息
var errors = [];
//遍历所有可能的验证技术
var name = element.id;
alert(name);
//去掉前后的空格
//检查元素是否带有该class并把它传给验证函数
//var re = new RegExp("(^|\\s")+name+"(\\s|$)";
//if(re.test(element.className)&&!errMsg[name].test(element))
if(!errMsg[name].test(element))
{
//没有验证通过就把错误消息加入数组中
errors.push(errMsg[name].msg);
}
//有错误消息就显示
if(errors.length){
showErrors(element,errors);
}
else{
hideErrors(element);
}
//如果字段到最后没有得到验证就返货false
return errors.length>0;
}
完整的例子可以参考下面的附件
分享到:
相关推荐
JavaScript不仅可以处理前端的用户输入验证,还可以利用AJAX(异步JavaScript和XML,现在更常见的是使用JSON)技术实现无刷新的数据交换,提供更好的用户体验。它可以通过XMLHttpRequest对象或现代浏览器的Fetch API...
7. **数据添加**:在数据添加功能中,用户填写表单后提交,Controller接收到请求,通过Service层调用MyBatis的Mapper接口执行插入数据库的SQL。成功后,返回相应的提示信息给前端。 8. **动态内容**:"ssm-dynamic...
- 适用于实时响应用户操作的场景,如表单验证、数据校验等。 - 能够立即反馈用户的操作结果,提高用户体验。 - **后台C#**: - 适用于需要服务器处理的数据逻辑,如数据持久化、业务规则处理等。 - 在服务器端...
在与后端交互时,可能使用了AJAX(Asynchronous JavaScript and XML)技术,实现了无刷新的数据交换,提高了用户体验。 后台管理功能通常需要管理员权限,这部分设计涉及到身份验证和授权机制。用户登录时,系统会...
在Java OA系统中,JavaScript主要负责页面的交互逻辑,如表单验证、数据处理、异步请求等。例如,使用`addEventListener`监听用户的点击事件,`fetch`或`XMLHttpRequest`发送AJAX请求与服务器进行数据交换,`DOM`...
7. 前端数据校验和错误处理:虽然示例中没有直接展示,但通常在进行此类操作时,前端会包含数据校验逻辑以确认用户输入的内容是否符合要求,以及在数据请求失败时向用户显示错误信息。 8. 代码编写和维护:示例中的...
JavaScript作为客户端脚本语言,用于实现动态交互,如表单验证、实时预览等功能。此外,可能还应用了像jQuery或Vue.js这样的库或框架,以简化DOM操作,提升性能,并实现更复杂的交互效果。 在后端,PHP作为服务器端...
上传成功后,将结果返回给前台,前台JavaScript函数接收到结果后进行处理。 #### 利用iframe框架上传图片 另一种方法是利用iframe框架进行文件上传。在这种方法中,通过在HTML表单中设置`target`属性为一个iframe...
10. **AJAX**:如果需要在验证过程中发送数据到服务器进行校验,例如防止重复的用户名,脚本可能会使用AJAX异步请求。 通过理解和掌握这些知识点,开发者可以有效地利用"页面输入前台JS验证通用脚本"来创建高效且...
这个压缩包“用户反馈组件_企业城微信小程序js代码前台前端H5页面源码.rar”包含了实现这一功能的具体源码,旨在帮助开发者快速集成用户反馈功能。 1. **微信小程序基础**: 微信小程序是一种轻量级的应用形态,由...
3. 表单验证:通过JavaScript进行前端验证,如非空检查、格式校验,防止无效数据提交。 4. 安全性:确保密码输入安全,通常使用星号或圆点隐藏输入内容,避免密码泄露。 5. 错误提示:当用户输入错误时,应提供清晰...
这种验证方式通过在HTML表单中插入JavaScript代码实现,可以提高用户体验,但也有其局限性,因为用户可以禁用JavaScript,使得验证失效。 Action级验证,即后台验证,发生在服务器端。这是更安全的验证方式,因为它...
- **Filter**:用于过滤请求,如权限控制、数据校验等。 - **BeanUtils**:Apache的工具类库,用于数据封装。 - **Jackson**:JSON序列化和反序列化工具,方便数据交换。 2. **Service层**: - **Javamail**:...
以密码校验为例,一个简单的Ajax应用可能包含HTML页面用于用户输入,JavaScript脚本来处理Ajax请求和响应,以及服务器端的PHP或其他后端语言用于验证数据。例如,JavaScript可以通过创建XmlHttpRequest对象,发送...
- `$('#spInfoForm').ajaxSubmit`方法是jQuery提供的Ajax提交表单的方式,它将表单中的数据序列化并通过Ajax发送给服务器。 - **后端代码(Java)**: - 定义了`importLogo`方法来处理上传请求。 - 使用`...
前端JavaScript校验是用户体验的重要组成部分,它能在用户提交表单前实时检查输入的有效性,如邮箱格式、手机号码合法性、密码强度等,减少无效请求并提高系统性能。通常使用正则表达式进行校验,确保数据的正确性...
通过使用`jquery-validate`,开发者可以轻松地为表单添加各种验证逻辑,如必填项检查、邮箱格式校验等,同时还能方便地定制错误提示信息,提高用户体验。 ### 二、安装与引入 在使用`jquery-validate`之前,首先...
为了实现前后端验证规则的同步,我们需要手动编写JavaScript代码,这可能涉及到大量的重复工作。为了解决这个问题,我们可以自定义一个JSP标签库(Taglib),它能根据模型上的验证注解自动生成JS验证代码。 1. 创建...
### 前台数据生成 在前台,我们使用JavaScript生成数据。比如在一个表单中,用户输入了姓名、全款金额和折扣信息,我们需要将这些数据收集起来并最终传送给后台。前台的JavaScript函数`generateDtb`负责生成数据。...