`

验证input输入值,并给出提示信息

 
阅读更多

 

<input type="text" name="requestedCorrectionHours" id="correctionInput" value="${wbViewBean.requestedCorrectionHours}" 
     onblur="leaveToHandler('correctionInput');">
  
var ERROR_MESSAGE = ({
 LIMIT_NUMBER: '<uw:write textKey="label.text.validate.input.limitnumber"/>'
})

 
     

function leaveToHandler(id){
 var value=$("#"+id).val();
 if(!verifyData(id,value)){
  var obj=$("#"+id);
  obj.select();
  obj.focus();  
  setTimeout(function(){obj.focus();obj.select();}, 4000);
 }
} 
  
function verifyData(id,data){
 var isSuccess = true;
 var valueStr=data+""; 
 var regu =  /^[-]?[0-9]+(\.[0-9]+)?$/; //验证带符号和小数点的数字
 var patt = new RegExp(regu);
 var lengthData = 7; //数字长度,不包括符号
 var decimalDigits = 2; //小数点后的位数
 
 if(valueStr.length==0){
  $("#"+id).val("0.0");
  return isSuccess;
 }
 
 if(!patt.test(valueStr)){
  showMessage(id,ERROR_MESSAGE.LIMIT_NUMBER);
  isSuccess= false;
  return isSuccess;
 }
 
 var indexStr = valueStr.indexOf('-'); 
//合法取值是 0 到 stringObject.length - 1,如果要检索的字符串值没有出现,则该方法返回 -1
 if(indexStr==0){
  valueStr = valueStr.substr(1); 
//stringObject.substr(start,length),如果没有指定 lenght,那么返回的字符串包含从 start 到 stringObject 的结尾的字符。
 }
 
 if(valueStr.length>lengthData){
  showMessage(id,ERROR_MESSAGE.LIMIT_NUMBER);
  isSuccess= false;
 }else if(valueStr.length<=lengthData){
  var index=valueStr.indexOf(".");
  if(index>0&&(valueStr.length-index>=(decimalDigits+1))){
   showMessage(id,ERROR_MESSAGE.LIMIT_NUMBER);
   isSuccess= false;
  }   
 }
 
 return isSuccess;
}  

 function showMessage(inputId,msg){
  msg="<span id='msg_"+inputId+"' class='hint'>"+msg+"</span>";
  $("#"+inputId).after(msg);
  var msgId="msg_"+inputId;  
  window.setTimeout("hideMessage('" + msgId + "')",4000);
 }
 function hideMessage(msgId){  
  $("#"+msgId).remove();
 }  

 

分享到:
评论

相关推荐

    input,验证,闪动,自动删除,限制输入

    根据给定文件的信息,我们可以总结出以下几个主要的知识点: ### 1. JavaScript 验证功能:限制用户输入 #### 1.1 只允许输入英文字符 ```html &lt;input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')...

    vue 校验多个input框右侧提示

    VueValidate是一个专门为Vue设计的表单验证插件,它允许开发者轻松地实现对多个input框的同步校验,并在输入框右侧实时显示提示信息。 在Vue中,我们通常会为每个input绑定一个v-model指令,用来同步用户的输入数据...

    jquery input字符串验证(手机号码验证、字母数字验证) 带示列

    这样,当用户在"phoneNumber"字段输入非手机号码,或在"password"字段输入非字母数字组合时,表单将无法提交,并显示相应的错误提示。 总结,通过jQuery和正则表达式,我们可以高效地实现网页中的数据验证,确保...

    input输入值正则校验及使用方式举例.txt

    4. **用户体验**: 应该提供友好的错误提示信息,并且尽可能在用户输入时即时反馈验证结果。 总结,通过使用这些正则表达式,我们可以有效地对用户输入的数据进行校验,从而增强应用的安全性和用户体验。在实际开发...

    jquery 动态处理页面中input 非空验证,和部分格式验证信息

    * 给引用页面动态添加验证事件 * 案例: 及格分数&lt;/label&gt; &lt;input type="text" id="PassScore" mstype="1" msg="及格分数" fmt="float"&gt; 分 * 解释:input id 为必有项, mstype="1":标识该输入框为...

    js input 密码只能输入数字或字母

    在JavaScript(JS)中,为实现输入框(input)只允许用户输入数字或字母的功能,我们需要对用户的输入进行实时验证。这种需求在很多Web应用中都常见,比如注册、登录页面的密码输入。以下是一个详细的方法来实现这个...

    解决html input验证只能输入数字,不能输入其他的问题

    通过上述知识点的介绍,可以明白如何限制HTML中的input控件只允许输入数字,并给出相应的用户提示。这种验证方法不仅帮助开发者确保表单数据的有效性和准确性,而且提升用户体验,防止提交错误或恶意数据。

    JavaScript客户端输入验证

    这种验证可以防止无效数据的提交,减轻服务器的负担,提高用户体验,因为错误提示可以即时显示,而无需等待服务器响应。下面将详细讨论JavaScript中的输入验证方法和正则表达式的应用。 首先,JavaScript提供了多种...

    web前端 input添加属性就可以验证 自动验证工具

    自动验证工具往往还包含错误提示功能,当输入不符合规则时,会显示相应的错误信息。这可以通过添加额外的HTML元素(如`&lt;span&gt;`)来显示错误消息,并在验证失败时更新其内容。jQuery提供了方便的操作DOM的方法,使得...

    jquery input国际电话输入提示表单代码

    本示例中的“jquery input国际电话输入提示表单代码”是一个利用jQuery实现的功能,旨在帮助用户在输入国际电话号码时提供实时的提示和验证。下面我们将深入探讨这一主题。 首先,为了实现这个功能,我们需要了解...

    selenium定位H5表单验证的提示语.docx

    在本文中,我们将深入探讨如何使用Selenium自动化测试工具来定位和处理HTML5表单验证的提示信息。首先,我们来看一个简单的HTML5表单示例,其中包含一个输入字段和一个提交按钮,并且该输入字段具有前端验证功能。 ...

    input输入框鼠标焦点提示信息

    当用户点击输入框时,`onfocus`事件会检查当前的值是否为提示信息,如果是,则清空输入框的值,让用户可以开始输入。相反,当用户离开输入框(失去焦点)时,`onblur`事件会检查输入框是否为空,如果为空,就会恢复...

    js 验证表单 动态提示

    如果验证失败,返回错误信息并显示给用户。 7. **友好的用户体验**:在设计动态提示时,应考虑用户体验,避免过于频繁的提示干扰用户。例如,可以设置一个延迟,只有在用户停止输入一段时间后才执行验证。 通过...

    用正则表达式验证表单

    表单验证,验证用户输入的数据是否合法 一般的表单验证都是在客户端进行的,用户名重复验证是在服务端进行的一般使用AJax... d、给出明确的提示信息span标签中以及边框的颜色 2、用户点击提交按钮的时候要给出提示

    Win Form程序中的输入验证控件 ValidateInput

    在实际应用中,还可以结合使用`ErrorProvider`控件来显示错误信息,它会在输入无效时在对应的输入控件旁边显示一个小红叉图标,并在鼠标悬停时显示详细错误信息。这将提升用户体验,使他们更容易理解并纠正错误。 ...

    BookStore 用javaScript验证 用户输入 网页

    为了提升用户体验,可以使用CSS来美化验证过程中的提示信息。例如,为错误消息设置红色背景,或者在验证成功时改变提交按钮的外观。 5. **正则表达式验证** 对于复杂的数据格式验证,如邮箱、手机号码,可以使用...

    控制input输入框中提示信息的显示和隐藏的方法

    在`qingkong`函数中,检查输入框的值是否为提示信息,如果是则清空;在`likai`函数中,检查输入框是否为空,为空则恢复提示信息。例如: ```javascript function qingkong(inputObj) { if (inputObj.value == "请...

    控制textarea文本长度,并限制输入字数(带统计显示)

    3. **多语言支持**:如果网站面向全球用户,需要考虑提示信息的语言翻译。 4. **响应式设计**:确保在不同设备和屏幕尺寸下,`textarea`和字数统计都能够正确显示。 此外,如果你希望在服务器端进行验证,可以使用...

    JavaScript 数据验证、email验证等

    非弹出对话框验证倾向于将错误信息直接显示在输入字段附近,提供更友好的用户体验。例如,可以使用HTML5的`setCustomValidity()`和`reportValidity()`方法: ```html &lt;input type="email" id="emailInput" ...

Global site tag (gtag.js) - Google Analytics