HTML页面输入验证

最新推荐文章于 2024-03-01 20:16:14 发布
最新推荐文章于 2024-03-01 20:16:14 发布
阅读量1.9k 收藏
点赞数
分类专栏： JavaScript/DHTML 文章标签： html function containers events express null
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TheMoment_Rain/article/details/1443151
版权
Function.registerNamespace( " net.bingosoft.web " );
net.bingosoft.web.Validators  =   function (containers) {
 var _containers = containers ? containers : document.body;
 var _self = this;
 var _errmsg = "";
 
 if( !(_containers instanceof Array) ){
  _containers = [_containers];
 }
 
 this.attach = function(){
  if(arguments.length > 0){
   _self._attach(arguments[0]);
  }else{
   _self._attach(_containers);
  }
 }
 
 this._attach = function(obj){
  if(!obj)return;
  if(!(obj instanceof Array))obj = [obj];
  
  for(var i=0; i<obj.length; i++){
   var container = obj[i];
   if(container.validator){
    container.style.backgroundColor = "#DDEEFF";
    _self._attachEvents(container);
   }
   
   if(container.childNodes)
   for(var j=0; j<container.childNodes.length; j++){
    var child = container.childNodes[j];
    _self._attach(child);
   }
  }
 }
 
 this._attachEvents = function(obj){
  var validatorNames = (obj.validator.trim()).split(/s*,s*/g);
  var len = validatorNames.length;
  for(var i = len - 1; i >= 0; i--){
   var validatorName = validatorNames[i].toLowerCase();
   var valiatorTypeName = _self._upperFirstLetter(validatorName) + "Validator";
   var namespace = typeof(obj.vnamespace) == 'undefined' ? "net.bingosoft.web" : obj.vnamespace;
   if(namespace) valiatorTypeName = namespace + "." + valiatorTypeName;
   
   var fn = Function.parse(valiatorTypeName);
   if(!fn) {
    alert ('can not find validator: ' + valiatorTypeName);
   }else{
    var validator = new fn(obj, validatorName);
    var events = validator.getEvents();
    if(events){
     var arrEvents = events.split(/s*,s*/g);
     for(var j=0; j<arrEvents.length; j++){
      obj.attachEvent(arrEvents[j], validator._doValidate);
     }
    }
   }
  }
 }
 
 this._getNamespace = function(obj, validatorName){
  var ns = validatorName + "_namespace";
  if(obj[ns]) return obj[ns];
  if(obj.vnamespace) return obj.vnamespace;
  return "net.bingosoft.web";
 }
 
 this._check = function(obj){
  var validatorNames = (obj.validator.trim()).split(/s*,s*/g);
  var len = validatorNames.length;
  for(var i = len - 1; i >= 0; i--){
   var validatorName = validatorNames[i].toLowerCase();
   var valiatorTypeName = _self._upperFirstLetter(validatorName) + "Validator";
   var namespace = _self._getNamespace(obj, validatorName);
   if(namespace) valiatorTypeName = namespace + "." + valiatorTypeName;
   
   var fn = Function.parse(valiatorTypeName);
   if(!fn) {
    alert ('can not find validator: ' + valiatorTypeName);
   }else{
     var validator = new fn(obj, validatorName);
     if(!validator._doValidate()) return false;
   }
  }
  return true;
 }
 
 this._upperFirstLetter = function(inputString){
  if(!inputString) return inputString;
  var first = inputString.substring(0,1).toUpperCase();
  var left = inputString.substring(1);
  return first + left;
 }
 
 this.validate = function(){
  if(arguments.length > 0){
   _self._validate(arguments[0]);
  }else{
   return _self._validate(_containers);
  }
 }
 
 this._validate = function(obj){
  if(!obj)return true;
  if(!(obj instanceof Array))obj = [obj];
  
  for(var i=0; i<obj.length; i++){  
   var container = obj[i];
   if(container.validator){
    if(!_self._check(container)) return false;
   }
   
   if(container.childNodes)
   for(var j=0; j<container.childNodes.length; j++){
    var child = container.childNodes[j];
    if(!_self._validate(child)) return false;
   }
  }
  return true;
 }
}
net.bingosoft.web.Validators.registerSealedClass( " net.bingosoft.web.Validators " ,  null ,  null );
net.bingosoft.web.Validators._attachBodyReadyState  =   function () {
 if (document.readyState=="complete") { 
  window.$validator = new net.bingosoft.web.Validators();
  window.$validator.attach();
 }
}
document.attachEvent( " onreadystatechange " , net.bingosoft.web.Validators._attachBodyReadyState);
 // /
//  {validator}_message
//  {validator}_namespace
//  {validator}_events
//  vmessage
//  vnamespace
//  venvents
//  vrealtime
net.bingosoft.web.Validator  =   function (element, validatorName) {
 net.bingosoft.web.Validator.initializeBase(this);
 
 var _element = element;
 if(!_element) throw new Error("can not found html element!");
 if(!validatorName) throw new Error("can not found param 'validatorName'");
 
 if(typeof (_element.validate_next) == 'undefined'){
  _element.validate_next = true;
//  _element.style.backgroundColor = "blue";
 }
 
 var _validatorName = validatorName;
 var _bRealtime = _element.vrealtime ? true : false;
 var _self = this;
 
 this.validate = function(){
  alert('do validate');
  return false;
 }
 
 this._doValidate = function(){
  //if(!element.validate_next) return true;
  var ret = _self.validate();
  //element.validate_next = !ret;
  return ret;
 }
 this.getValidatorName = function(){
  return _validatorName;
 }; net.bingosoft.web.Validator.registerBaseMethod(this, "getValidatorName");
 
 this.getMessage = function(){
  return _element[_self.getValidatorName() + "_message"]
   ? _element[_self.getValidatorName() + "_message"]
   : _element["vmessage"]
    ? _element["vmessage"]
    : _self.getDefaultMessage();
 }; net.bingosoft.web.Validator.registerBaseMethod(this, "getMessage");
 
 this.getDefaultMessage = function(){
  return "error input";
 }; net.bingosoft.web.Validator.registerBaseMethod(this, "getDefaultMessage");
 
// this.getNamespace = function(){
//  return _element[_self.getValidatorName() + "_namespace"]
//   ? _element[_self.getValidatorName() + "_namespace"]
//   : _element["vnamespace"]
//    ? _element["vnamespace"]
//    : _self.getDefaultNamespace();  
// }; net.bingosoft.web.Validator.registerBaseMethod(this, "getNamespace");
// 
// this.getDefaultNamespace = function(){
//  return "net.bingosoft.web";
// }; net.bingosoft.web.Validator.registerBaseMethod(this, "getDefaultNamespace");
 this.getEvents = function(){
  return _element[_self.getValidatorName() + "_events"]
   ? _element[_self.getValidatorName() + "_events"]
   : _element["vevents"]
    ? _element["vevents"]
    : _self.getDefaultEvents();
 }; net.bingosoft.web.Validator.registerBaseMethod(this, "getEvents");
 
 this.getDefaultEvents = function(){
  var events = "onblur";
  if(_bRealtime) events = "onblur,onkeypress,onpaste";
  
  return events;
 }; net.bingosoft.web.Validator.registerBaseMethod(this, "getDefaultEvents");
 
 this.isRealTime = function(){
  return _bRealtime;
 }; net.bingosoft.web.Validator.registerBaseMethod(this, "isRealTime");
 
 this.getValue = function(){
  return _element.value;
 }; net.bingosoft.web.Validator.registerBaseMethod(this, "getValue");
 
 this.reportError = function(){
  alert(_self.getMessage());
  if(element.focus)element.focus();
  if(element.select)element.select();
  
  //element.validate_next = true;
 }; net.bingosoft.web.Validator.registerBaseMethod(this, "reportError");
 
 //@Override
 this.toString = function(){
  return "[Validator]";
 }
}
net.bingosoft.web.Validator.registerClass( " net.bingosoft.web.Validator " );
net.bingosoft.web.Validator.prototype.toString  =   function () {
 return "validator";
}
// /
//  validator="notempty"
net.bingosoft.web.NotemptyValidator  =   function (element) {
 net.bingosoft.web.NotemptyValidator.initializeBase(this, [element, "notempty"]);
 var _self = this;
 
 //@Override
 this.validate = function(){
  var value = net.bingosoft.web.NotemptyValidator.callBaseMethod(_self,"getValue");
  var passed = value && value.trim();
  if( !passed ){
   net.bingosoft.web.NotemptyValidator.callBaseMethod(_self, "reportError");
  }
  
  return passed;
 }
 
 //@Override
 this.getDefaultMessage = function(){
  return "can not be empty";
 }
 
 //@Override
 this.getDefaultEvents = function(){
  return "";
 }
 
 //@Override
 this.toString = function(){
  return "[Notempty Validator]";
 } 
}
net.bingosoft.web.NotemptyValidator.registerClass( " net.bingosoft.web.NotemptyValidator " , net.bingosoft.web.Validator,  null );
 // /
//  validator="reg"
//  reg_checktime
//  reg_realtime
net.bingosoft.web.RegValidator  =   function (element, validatorName, checktimReg, realtimeReg, defaultMsg) {
 net.bingosoft.web.RegValidator.initializeBase(this, [element, validatorName]);
 var _self = this;
 var _element = element;
 var _checktimeReg = checktimReg || _element.reg_checktime;
 var _realtimeReg = realtimeReg || _element.reg_realtime;
 var _defaultMsg = defaultMsg;
 
 if(!_checktimeReg){
  alert("reg validator need attribute 'reg_checktime'");
 } 
 
 //@Override
 this.validate = function(){
  var eventtype = window.event.type;
  var value = net.bingosoft.web.RegValidator.callBaseMethod(_self, "getValue");
  if(eventtype == "keypress")value += String.fromCharCode(window.event.keyCode);   
  if(value=="") return true;
  
  var bRealtime = net.bingosoft.web.RegValidator.callBaseMethod(_self, "isRealTime");
  if((eventtype == "keypress" || eventtype == "paste") && bRealtime){
   _element.reg_express = _realtimeReg || _checktimeReg;
  }else{
   _element.reg_express = _checktimeReg;
  }
  var reg = new RegExp(_element.reg_express);
  var passed = reg.test(value);
//  alert(passed ? "passed" : "not passed");
  if(passed) return passed;
    
  if(eventtype == "blur"){
   net.bingosoft.web.RegValidator.callBaseMethod(_self, "reportError");
  }else{
   window.event.returnValue = false;  
  }
  return passed;
 }
 
 //@Override
 this.getDefaultMessage = function(){
  return _defaultMsg || "not match the regular";
 }
 
 //@Override
 this.toString = function(){
  return "[Reg Validator]";
 }
}
net.bingosoft.web.RegValidator.registerClass( " net.bingosoft.web.RegValidator " , net.bingosoft.web.Validator,  null );
 // /
//  validator="upper"
net.bingosoft.web.UpperValidator  =   function (element) {
 net.bingosoft.web.UpperValidator.initializeBase(this, [element, "upper"]);
 var _self = this;
 
 //@Override
 this.validate = function(){
  var eventtype = window.event.type;
  var value = net.bingosoft.web.RegValidator.callBaseMethod(_self, "getValue");
  if(eventtype == "paste"){
   var tempStr = window.clipboardData.getData("Text").toUpperCase();
   window.clipboardData.setData("Text",tempStr);
  }else if(eventtype=="keypress"){
   var keyCode = window.event.keyCode;
   if (keyCode >= 97 && keyCode <= 122)
    window.event.keyCode = keyCode - 32;
  }
  
  return true;
 }
 
 //@Override
 this.getDefaultEvents = function(){
  return "onblur,onkeypress,onpaste";
 }
} ;net.bingosoft.web.UpperValidator.registerClass( " net.bingosoft.web.UpperValidator " , net.bingosoft.web.Validator,  null );
 // /
//  validator="lower"
net.bingosoft.web.LowerValidator  =   function (element) {
 net.bingosoft.web.LowerValidator.initializeBase(this, [element, "upper"]);
 var _self = this;
 
 //@Override
 this.validate = function(){
  var eventtype = window.event.type;
  var value = net.bingosoft.web.RegValidator.callBaseMethod(_self, "getValue");
  if(eventtype == "paste"){
   var tempStr = window.clipboardData.getData("Text").toLowerCase();
   window.clipboardData.setData("Text",tempStr);
  }else if(eventtype=="keypress"){
   var keyCode = window.event.keyCode;
   if (keyCode >= 65 && keyCode <= 90)
    window.event.keyCode = keyCode + 32;
  }
  
  return true;
 }
 
 //@Override
 this.getDefaultEvents = function(){
  return "onblur,onkeypress,onpaste";
 }
} ;net.bingosoft.web.LowerValidator.registerClass( " net.bingosoft.web.LowerValidator " , net.bingosoft.web.Validator,  null );
 // /
net.bingosoft.web.NumberValidator  =   function (element) {
 net.bingosoft.web.NumberValidator.initializeBase(this, [element, "number", "^/d+$", "^/d*$", "you should input a number"]);
} ;net.bingosoft.web.NumberValidator.registerClass( " net.bingosoft.web.NumberValidator " , net.bingosoft.web.RegValidator,  null );
 // /
net.bingosoft.web.EmailValidator  =   function (element) {
 net.bingosoft.web.EmailValidator.initializeBase(this, [element, "email",
  "^[/w-]+(/.[/w-]+)*@[/w-]+(/.[/w-]+)+$",
  "^(([/w-]+(/.[/w-]+)*@?)|([/w-]+(/.[/w-]+)*@[/w-]+)|([/w-]+(/.[/w-]+)*@([/w-]+/.)+)|([/w-]+(/.[/w-]+)*@[/w-]+(/.[/w-]+)+))$",
  "email format error"]);
} ;net.bingosoft.web.EmailValidator.registerClass( " net.bingosoft.web.EmailValidator " , net.bingosoft.web.RegValidator,  null );
 
TheMoment_Rain
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【网页设计作业】html数字计算机器人验证测试
04-05
下面是关于 HTML 数字计算和机器人验证测试...编写 JavaScript 代码来验证用户的输入是否与计算出的结果匹配，并给出相应的提示。 以下是一个简单的例子，展示了如何使用 HTML、CSS 和 JavaScript 创建数字计算的表单：
HTML5-表单的应用、初级验证
qq_61727355的博客
08-22 171
点击文本后，对应的输入框获得焦点。通过 for 和 id 属性关联。有三种：placeholder、required、pattern。只是隐藏了框，属性依旧存在，我们可以通过隐藏域传递一些默认值。pleaseholder：提示信息（适用于输入框控件）required：非空校验（不允许元素为空）pattern：正则表达式。1）为什么要进行表单验证？
html验证码
Java721的博客
04-13 3538
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <label>验证码</label> <input type="button" id="code"> <script src="layui/layui.js"
[HTML5]其他表单元素及输入验证
GUIDM的博客
04-05 1655
1、使用其他表单元素 select、optgroup、textarea、output、keygen 1.1、生成选项列表 select元素可以用来生成一个选项列表供用户选择。 ‼️select元素的name、disabled、form、autofocus、requied属性与input元素的同名属性类似。 ‼️size属性：设定要显示给用户的选项数目 multiple属性：用户一次选择多个选项 提供给用户的选项由option元素 eg： ​​​​​​​<......
HTML---表单验证
最新发布
zhoutong2323的博客
03-01 1232
前端中的表单验证是在用户提交表单之前，对用户输入的数据进行合法性检查的过程。这种验证的目的是确保用户输入的数据符合预期的要求，从而减少错误和无效的数据提交，提高数据的质量和准确性。输入类型的验证：检查用户输入的数据是否符合预期的输入类型，如文本、数字、邮箱、密码等。必填字段的验证：确保用户必须填写某些字段，这些字段通常是表单中的关键信息。日期和时间范围的验证：检查用户输入的日期或时间是否在允许的范围内。步长的验证：对于某些需要递增或递减的输入字段，如价格、评分等，验证其步长是否符合要求。
html验证表单输入合法性,WEB开发中HTML页面表单(FORM)域输入合法性的客户端验证...
weixin_36197581的博客
06-04 476
//使用举例/***统一验证方法*Form元素中输入相关标记*vmode:['notnull']*vdisp:显示信息*vtype:校验类型['none','string','tabledefine','integer','datetime','date','time','postcode','float','email','phone','mobiletel','ip']...
js浏览器html5表单验证
11-27
html5表单添加了很多类型的表单，而且还自带验证的功能。在移动端，手机等设备能够根据不同的input类型弹出不同的键盘，例如iphone弹的键盘 但是由于不同的浏览器对不合法输入提示文案不一致，样式也不一样，并且老...
使用BootStrapValidator完成前端输入验证
09-01
使用BootStrapValidator进行前端输入验证是Web开发中一个重要的环节，它可以帮助我们确保用户在提交数据前输入的信息是合法且符合预期的。BootStrapValidator是一款基于Bootstrap框架的验证插件，它提供了丰富的验证...
解放web程序员的输入验证
01-19
本程序最初是由wanghr...简化了调用方式，所有操作只需要[removed],然后在HTML里定义各标签验证格式 对IE增加了对键盘输入的限制（如：定义usage=’int’时，输入框只能输入数字（非IE无效） 增加了对disabled的不验证
HTML5验证以及日期显示的实现详解
09-28
3. **URL输入验证**： `<input type="url">` 类型的输入框会自动验证输入是否为合法的URL，减少了开发者处理无效链接的困扰。 4. **日期选择器**： HTML5提供了多种日期选择类型，如`<input type="date">`、`...
HTML 表单验证 （输入框的验证）
12-26
JS 只能输入数字，email的验证。。。JS 只能输入数字，email的验证。。。JS 只能输入数字，email的验证。。。
html页面访问安全控制,怎样检测前端页面的安全性？如何避免web页面攻击？
weixin_31154627的博客
06-04 544
WEB基本攻击大致可以分为三大类—— “资源枚举”、“参数操纵” 和 “其它攻击”资源枚举：遍历站点所有可访问的目录，然后把一些常见的备胎文件名(比如“sql.bak”、“index-副本.html”)一个个都枚举一下，如果运气好枚举到了就直接下载。参数操纵：包括了SQL注入、XPath注入、cgi命令执行，还有XXS和会话劫持等，xxs攻击指的是恶意攻击者往Web页面里插入恶意html代码，当用...
HTML前端表单校验的方法
若有所执，必有所成，心之所向，必显光芒
01-20 1738
HTML表单方式校验：Jquery Validate框架校验，JS手写校验
如何在网站中添加验证码验证
corry12的博客
04-14 2561
在上述示例代码中，我们首先在服务器端生成一个随机的验证码，并将其保存到会话中，接着生成验证码图片，并将其显示在HTML表单中。当用户提交表单时，我们从会话中获取之前生成的验证码，与用户输入的验证码进行比较，以验证用户输入的验证码是否正确。需要注意的是，为了保证验证码的安全性，我们需要在每次生成验证码时都重新生成一个新的随机数，避免恶意攻击者通过暴力破解的方式破解验证码。在用户提交表单时，从会话中获取之前生成的验证码，与用户输入的验证码进行比较，以验证用户输入的验证码是否正确。在表单中显示验证码图片。
【HTML】HTML实现简单表单验证（正则表达式、非空判断、输入框提示信息）
A Lucky Boy的博客
02-20 5793
<!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>练习.
html页面实现登录验证码功能（纯前端）
爱学习的大雄的博客
06-13 2万+
html+css+javascript简易实现注册或登录时实现验证码功能：原文链接：https://blog.csdn.net/weixin_41472431/article/details/90732468
HTML表单验证(含用户名，密码，邮箱，手机号，验证码-验证)
热门推荐
qq_46015509的博客
06-09 4万+
HTML 表单登录js简单验证
html邮箱输入验证码,以html格式输入验证码
weixin_31270363的博客
06-07 876
我有一个html表单，而且我已经编写了必要的代码。以html格式输入验证码HTML在主代码：Enter captcha here :PHP在主代码：if(empty($_SESSION['6_letters_code']) ||strcasecmp($_SESSION['6_letters_code'], $_POST['6_letters_code']) != 0){//Note: the ca...
HTML5--输入验证
杨森源的博客
08-24 2989
使用输入验证在获取用户输入数据的时候，得到的有可能是一些不堪敷用的东西。其原因可能是用户输入出错，也可能是设计者没有把自己想要的数据类型说清楚。HTML5引入了对输入验证(input validation)的支持。设计者可以告诉浏览器自己需要什么类型的数据，然后浏览器在提交表单之前会使用这些信息检查用户输入的数据是否有效。要是数据有问题，浏览器会提示用户进行更正，而且只有把这些问题解决后才能提交表单
html登陆页面实现验证功能
05-31
要实现登录页面的验证功能，可以使用以下步骤： 1. 创建一个 HTML 表单，包含用户名和密码两个输入框，以及一个提交按钮。 2. 在表单中添加 JavaScript 代码，用于验证用户输入的用户名和密码是否符合要求。例如，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值