js面向对象加构造函数模式表单验证

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
  <div>
    <input type="text" id="userName" value="6">
    <input type="password" id="password">
    <button id="button">提交</button>
  </div>
  <script>
    var m={
      userName:$("#userName").val(),
      password:$("#password").val(),
      userTest:/^[a-zA-Z]{1}[A-Z|a-z|0-9]{5,29}/,
      passwordTest:/^(\w){6,20}$/,//6-20个字母
      test:function(testDate, testReg,testName){
        this.testDate = testDate;
        this.testReg = testReg;
        this.testName = testName;
        this.testFormData=function(){
          if(this.testDate==‘‘){
            alert(this.testName+‘不能为空,请输入‘)
            return false;
          }else if(!this.testReg.test(this.testDate)){
            alert(testName+‘格式不正确,请重新输入‘)
            return false;
          }else{
            return true;
          }
        }
      },
        page:function(){
                      alert(‘登录成功,欢迎来到百度‘)
         window.location=‘https://www.baidu.com‘
      },
          commit:function(){
        this.userName=$("#userName").val();
        this.password=$("#password").val();
        var test=this.test;
        var userNameTest=new test(this.userName,this.userTest,‘用户名‘);
        var passwordTest=new test(this.password,this.passwordTest,‘密码‘);
        var userNameV=userNameTest.testFormData()
        console.log(userNameV)
        if(!userNameV){//如果用户名不规范 就直接退出运行 不进行密码验证
          return;
        }else{
          var passwordV=passwordTest.testFormData()
        }
        if(userNameV&&passwordV){
          this.page();
        }
     }
}

$(‘#button‘).click(function(){
  m.commit()
})
</script>
</body>
</html>

原文地址:https://www.cnblogs.com/xts6/p/11312279.html

时间: 2024-11-13 04:18:48

js面向对象加构造函数模式表单验证的相关文章

jquery.validate.js【简单实用的表单验证框架】

在线演示1 本地下载 原文链接:http://www.gbtags.com/gb/share/5749.htm 最近在做用户登录.注册.以及用户中心...然后之前在慕课网学的jquery.validate用得着地方了,根据自己需求进行了细节修改,重要是样式方面吧. 第一次发表这些,说得不好不要介意,开始吧.首先: $("#form").validate({ //在这里面编辑 }); 验证的时候常常需要调试,该框架内置了一个方法,如下: debug:true, //调试模式(并不会提交)

jquery.validate.js【简单实用的表单验证框架】【进阶版】

这个是这个插件的官网和我找到的一个中文博客.(虽然插件的名字叫做jquery.validte.js,但其实,这个插件的名字叫jquery validation). 基础的用法可以去看冷子欲的文章或者上面的博客,我这里就不详细介绍了. 首先最重要的一点,所有要验证的域都要在form里,同时这些域都要有name属性. 详细内容请见原文链接:http://www.gbtags.com/gb/share/5765.htm 1. 默认validate参数的初始化: 这个插件如果要用,肯定很多页面都会用到,

javascript面向对象思想做form表单验证 代码很精简哦

<html> <head> <meta charset=utf-8 /> <!--引入jQuery--> <!--coder:[email protected] 孙亚龙---> <script src="jquery-1.7.2.min.js"></script> <script> var obj = { res : true , nick_fun : function(o,tip){ if

(转)强大的JQuery表单验证插件 FormValidator使用介绍

jQuery formValidator表单验证插件是客户端表单验证插件.在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者(JavaScript开发者)需要编写大量的JavaScript来进行表单元素的校验,而这些校验在平时开发中不停的重复书写.常见的校验如不能为空,必须满足长度要求,必须为数字,必须为Email等等.一般要判断的表单元素比较多,开发过程就显得枯燥无味--重复的代码不断重复,而且可能还要兼容多种浏览器,更多

jquery表单验证使用插件formValidator

jquery表单验证使用插件formValidator,可供有需求的朋友参考 1.首先在项目中添加必备js与css  2.代码中添加引用(必备引用) 复制代码 代码如下: <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jquery必须库--> <script src="formValidator1/for

vue表单验证,vee-Validate

1.下载安装 npm install vee-validate --save 2.main.js 添加 //vue表单验证插件 import VeeValidate,{Validator} from 'vee-Validate'; //没有配置过的错误提示默认使用英文显示的, //如果想要用中文显示需要我们手动配置一下 import zh from 'vee-validate/dist/locale/zh_CN';   Validator.localize('zh', zh); //blur 失

jquery.validation.js 表单验证

jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 一导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jq

介绍jquery.validate.js简单实用的表单验证框架

在线演示1 本地下载 最近在做用户登录.注册.以及用户中心...然后之前在慕课网学的jquery.validate用得着地方了,根据自己需求进行了细节修改,重要是样式方面吧. 第一次发表这些,说得不好不要介意,开始吧.首先: $("#form").validate({ //在这里面编辑 }); 验证的时候常常需要调试,该框架内置了一个方法,如下: debug:true, //调试模式(并不会提交) 来个实例,HTML: <div class="form-group&qu

Jquery.validate.js表单验证插件的使用

作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例讲解应用.it's perfect. 首先记录一些使用过程中,爱犯的错误: 1>忘记给表单form添加id属性 2>input这些表单标签必须id属性和name属性名字一样.例如:<input type="text" id="name" name=&q