HTML/JSP 输入格式限制与计算示例

本文主要探讨了在HTML和JSP页面中如何进行输入格式限制和计算应用，包括手机号码和身份证号码的验证，以及输入框自动求和功能的实现。 在前端开发中，对用户输入进行格式限制是非常重要的，可以防止无效数据的提交，提升用户体验。以下是一些具体的实现方法： 1. 手机号码限制格式： 为了确保输入的手机号码格式正确，可以使用正则表达式进行验证。例如，下面的函数`check`会检查输入的值是否符合中国大陆手机号码的格式（11位数字，前三位可能是130-139, 150-159, 180-189）： ```javascript function check(temp){ var re = /^(((13[0-9]{1})|(15[0-3,5-9]{1})|(18[0,5-9]{1}))+\d{8})$/; if(!re.test(temp.value)){ alert("手机号码格式不正确!"); return; } } ``` 2. 身份证号码限制格式： 身份证号码的验证更为复杂，因为它涉及到年月日和校验码的检查。下面的`check2`函数使用了一个更复杂的正则表达式来验证18位身份证号码： ```javascript function check2(temp){ var re = /^\d{6}((?:19|20)(?:(?:\d{2}(?:0[13578]|1[02])(?:0[1-9]|[12]\d|3[01]))|(?:\d{2}(?:0[13456789]|1[012])(?:0[1-9]|[12]\d|30))|(?:\d{2}02(?:0[1-9]|1\d|2[0-8]))|(?:(?:0[48]|[2468][048]|[13579][26])0229)))\d{2}(\d)[X\d]$/ if(!re.test(temp.value)){ alert("身份证号码格式不正确!"); return; } } ``` 3. 输入框自动求和： 在HTML页面中，可以通过监听输入框的`blur`事件来实现数值的自动求和。以下代码展示了三个输入框（`#one`, `#two`, `#three`）的值相加并显示在`#sum`输入框中的实现： ```javascript $(function(){ $("input").blur(function(){ var sum = (((parseInt($("#one").val()*100)) + (parseInt($("#two").val()*100)) + (parseInt($("#three").val()*100))) / 100).toFixed(2); $("#sum").val(sum); }) }); ``` 4. 长度限制： 如果需要限制输入框的字符长度，可以使用HTML的`maxlength`属性，例如`maxlength="11"`表示最多允许输入11个字符。此外，还可以通过JavaScript的`onkeyup`事件配合正则表达式来实时过滤非数字或非特定格式的字符，以确保输入内容的合法性。 ```html <input id="example" onkeyup="value=value.replace(/[^\-?\d.]/g,'')" maxlength="11"> <!-- 只允许输入数字和小数点 --> <input id="example2" onkeyup="value=value.replace(/[^\d.]/g,'')" maxlength="11"> <!-- 只允许输入数字 --> <input id="example3" onkeyup="if((/[^\d.]/g).test(this.value)) this.value = this.value.replace(/[^\d.]/g,'')"> <!-- 仅数字和小数点，回退时仍可输入 --> ``` 总结来说，通过结合HTML标签属性和JavaScript函数，我们可以实现前端对用户输入的多种限制和计算功能，从而确保数据的准确性和页面交互的流畅性。这些技巧在开发过程中非常实用，能帮助我们创建更健壮和用户友好的Web应用程序。