jquery select表单validate必填验证 jquery表单验证

转载

码海航行侠 2024-03-13 18:18:44

文章标签 jquery ViewUI 表单默认值控件 文章分类 jQuery 前端开发

我们从事的工作中一般很少涉及到UI的部分，之前我对UI实在是了解的非常少，总想把UI的这部分的缺陷补上来，所有打

算抽点时间学习下jquery。

在web开发中，表单验证应该是一个常见的校验之一，关于jquery表单验证这方面的资料也非常的丰富。在这里采用的是

jquery表单的校验框架。

一个简单的表单提交，通过jquery框架来校验表单字段。

实现该功能可以分为以下几步：

1.导入相关的js文件

<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="formValidator-4.0.1.js"></script>
<script type="text/javascript" src="formValidatorRegex.js"></script>
<script type="text/javascript" src="DateTimeMask.js"></script>
<link type="text/css" rel="stylesheet" href="style/validator.css"></link>

2.初始化表单校验方法

$(document).ready(function() {
  $.formValidator.initConfig({
   formID : "form1",
   debug : false,
   submitOnce : true,
   onError : function(msg, obj, errorlist) {
    $("#errorlist").empty();
    $.map(errorlist, function(msg) {
     $("#errorlist").append("<li>" + mgs + "</li>");
    });
   },
   submitAfterAjaxPrompt : '有数据正在异步验证，请稍等...'
  });

3.编写校验的字段信息

例如年龄校验：

$("#age").formValidator({
   autoModify : true,
   onShow : "请输入的年龄（1-99岁之间）",
   onFocus : "只能输入1-99之间的数字哦",
   onCorrect : "恭喜你,你输对了"
  }).inputValidator({
   min : 1,
   max : 99,
   type : "value",
   onErrorMin : "你输入的值必须大于等于1",
   onError : "年龄必须在1-99之间，请确认"
  }).defaultPassed();

如果是电话号码校验，可以采用正则表达式。

$("#lxdh").formValidator({
         empty : true,
         onShow : "请输入你的联系电话，可以为空哦",
         onFocus : "格式例如：0755-88888888",
         onCorrect : "谢谢你的合作",
         onEmpty : "你真的不想留联系电话了吗？"
        }).regexValidator({
           regExp : "^(([0\\+]\\d{2,3}-)?(0\\d{2,3})-)?(\\d{7,8})(-(\\d{3,}))?$",
           onError : "你输入的联系电话格式不正确"
      });

关于表单校验中的相关属性说明

juery formvalidator插件 API帮助文档

目前支持4种大的校验方式，分别是：InputValidator（针对input、textarea、select控件）、CompareValidator、AjaxValidator、RegexValidator、FunctionValidator 每种格式支持的控件类型如下：
插件目前提示错误，有两种模式：showword和showalert,即文字提示和窗口提示，下面的5大验证方式，针对showalert这种方式不是都必须的，有些配置是没有作用的下面分别罗列全局初始化和5种校验方式公开的属性
formValidator:	用来做初始化的类型，必须先执行


InputValidator：


CompareValidator：


RegexValidator:


AjaxValidator:	几乎所有的属性跟$.ajax()的属性一样，请参考$.ajax()函数的帮助


公共函数:	主要是设置全局参数和判断是否通过校验


问答：
1、如何实现一个控件，根据不同的情况，实现不同的控制？
你只需要在你的不同种情况下，重新设置你的【一行代码】

2、一个页面上我有几个tab页，如何实现每个Tab页上的控件单独校验？
每个Tab页上需要校验的控件，你在写【一行代码】的时候，显示的声明组号

3、我采用的页面上文字问题的方式，点提交的时候，有校验未通过的，除了文字提示外，还可以再弹出窗口提示吗？
这个问题很简单，你只要设置改组的全局配置， jQuery.formValidator.initConfig({onError:function(){alert("有部分校验没有通过，请看页面具体提示");}})

4、所有校验通过后，我还要再做别的判断可以吗？我自己的判断没有通过可以中断提交吗？
同样很简单，你页只需设置该组的全局配置， `jQuery.formValidator.initConfig({onSuccess:function() { if(你的额外判断失败) return false; else return true; }})`

5、我有一组的checkbox（radiobutton）如何设置校验？
你只需在该组的第一个checkbox上设置校验信息即可，具体请参考demo1里的范例如果你该组的第一个控件的ID ，你可以这么写:$("sex_1").InputValidator({...}) 如果你只知道该组的name，你可以这么写:$("input:check[@name='sex']").slice(0,1).InputValidator({...})

6、我有2个表单元素，任意一个元素输入东西就算验证通过，如何写代码？比如要求输入中文名字和英文名字任意一个即算校验通过。
正在开发这个功能

7、一个表单元素校验通过了，但是我想额外再进行其它的校验，出错要自定义错误，如何写代码？
$("#ewjy").formValidator({onshow:"无论你输入什么，都会提示你额外校验出错，错误信息自定义",onfocus:"至少输入一个字符",oncorrect:"你怎么可能输入正确了，难道是bug?",onvalid:function(){$.formValidator.SetFailState("ewjyTip","额外校验失败");alert("额外校验失败");return false;}}).InputValidator({min:1,onerror:"这里至少要一个字符,请确认"});

8、如何让赋了初始值的表单元素默认校验通过
$("#xueli").formValidator({onshow:"请选择你的学历",onfocus:"学历必须选择",oncorrect:"谢谢你的配合",defaultvalue:"b"}).InputValidator({onerror: "你是不是忘记选择学历了!"}).DefaultPassed();

	input					textarea	select
校验方式	text	radio	checkbox	file	password	textarea	select-one
InputValidator	√	√	√	√	√	√	√
CompareValidator	√			√	√	√
AjaxValidator	√			√	√	√	√
RegexValidator	√			√	√	√
FunctionValidator	√	√	√	√	√	√	√