찾다
웹 프론트엔드JS 튜토리얼jquery 양식 유효성 검사는 플러그인 formValidator_form 효과를 사용합니다.

1. 먼저 프로젝트에 필요한 js와 css를 추가하세요


2. 코드에 참조(필수 참조)를 추가합니다.

코드 복사 코드는 다음과 같습니다.


--양식 검증 필수 라이브러리-->


3. 에서 확인할 태그(일반적인 데모 만들기)
코드 복사 코드는 다음과 같습니다.



















































































































































4. <script> <STRONG><BR><div class="codetitle"><span>코드 복사<a style="CURSOR: pointer" data="99306" class="copybut" id="copybut99306" onclick="doCopy('code99306')"><U> 코드는 다음과 같습니다.<div class="codebody" id="code99306"> <BR><script type="text/javascript"> <BR>$(document).ready(function () { <BR>$.formValidator.initConfig({ formID: "form1", onError: function () { Alert("확인에 실패했습니다. 특정 오류는 오류 메시지를 참조하세요.") } }) <BR>$("#sfz").formValidator({ onShow: "15자리 또는 18자리를 입력하세요. ID 카드 ", onfocus: "15자리 또는 18자리 ID 카드를 입력하세요.", onCordirect: "입력이 정확합니다." }).regexValidator({ regExp: "idcard", dataType: "enum", onError: "ID 카드의 형식 입력하신 신분증이 올바르지 않습니다. " }); ; <BR>$("#sfz1").formValidator({ onShow: "15자리 또는 18자리의 신분증을 입력하세요.", onfocus: "15자리 또는 18자리의 신분증을 입력하세요. 18자리 ID 카드", onCordirect: "정확하게 입력하세요" }).functionValidator({ fun: isCardID }); <BR>$("#zs").formValidator({ onShow: "정수를 입력하세요.", onCordirect: "협조해 주셔서 감사합니다. 정수가 정확합니다." } ).regexValidator({ regExp: "intege", dataType: "enum", onError: "정수 형식이 잘못되었습니다." }) <BR>$("#zzs ").formValidator({ onShow: "양의 정수를 입력하세요" , onCordirect: "협조해 주셔서 감사합니다. 양의 정수가 맞습니다." }).regexValidator({ regExp: "intege1", dataType: "enum", onError : "양의 정수 형식이 잘못되었습니다." }); <BR>$( "#fzs").formValidator({ onShow: "음의 정수를 입력하세요.", onCordirect: "협조해 주셔서 감사합니다. 음의 정수가 맞습니다. " }).regexValidator({ regExp: "intege2", dataType: "enum", onError: "음의 정수 형식이 잘못되었습니다." }); <BR>$("#sz").formValidator({ onShow: "입력하세요. a number", onCordirect: "협조해 주셔서 감사합니다. 번호가 정확합니다." }). regexValidator({ regExp: "num", dataType: "enum", onError: "숫자 형식이 잘못되었습니다." }); <BR>$("#zs1").formValidator({ onShow: "양수를 입력하세요.", onCorrent: "협조해 주셔서 감사합니다. 양수가 맞습니다." }).regexValidator({ regExp: "num1", dataType : "enum", onError: "양수 형식이 잘못되었습니다." }) <BR>$("# fs").formValidator({ onShow: "음수를 입력하세요.", onCordirect: "협조해 주셔서 감사합니다. , 음수가 정확합니다." }).regexValidator({ regExp: "num2", dataType: "enum", onError: "음수 형식이 잘못되었습니다." }); <BR>$("#sj").formValidator ({ onShow: "휴대폰 번호를 입력하세요", onfocus: "13 또는 15로 시작해야 합니다.", onCorret: "협력해 주셔서 감사합니다. 휴대폰 번호가 정확합니다." }).regexValidator({ regExp: "mobile", dataType: "enum", onError: "휴대폰 번호 형식이 잘못되었습니다." }) <BR>//$("#").formValidator({onShow:"",onfocus:"입력하세요",onCordirect:"감사합니다. 협조해 주셔서 감사합니다. 귀하의 형식이 정확합니다."}).regexValidator({regExp:"",dataType:"enum",onError:"형식이 잘못되었습니다. "}); <BR>$("#email").formValidator( { onShow: "이메일을 입력하세요.", onfocus: "입력하는 이메일 형식에 주의하세요. 예: wzmaodong@126.com", onCordirect: "협조해 주셔서 감사합니다. 이메일이 정확합니다." }). regexValidator({ regExp: "email", dataType: "enum", onError: "이메일 형식이 잘못되었습니다." }) <BR>$("#fds") .formValidator({ onShow: "부동 소수점 숫자를 입력하세요." , onCordirect: "협조해 주셔서 감사합니다. 부동 소수점 숫자가 정확합니다." }).regexValidator({ regExp: "decmal", dataType: "enum", onError: "부동 소수점 숫자 형식이 잘못되었습니다." }); 🎜>$("#zfds").formValidator({ onShow: "양수 부동 소수점 숫자를 입력하세요.", onCordirect: "협조해 주셔서 감사합니다. 양수 부동 소수점 숫자가 정확합니다." }).regexValidator ({ regExp: "decmal1", dataType: "enum", onError: "양수 부동 소수점 숫자의 형식이 잘못되었습니다." }) <BR>$("#ffds").formValidator({ onShow: "음수 부동 소수점을 입력하세요. number" , onCordirect: "협조해 주셔서 감사합니다. 음수 부동 소수점 숫자가 정확합니다." }).regexValidator({ regExp: "decmal2", dataType: "enum", onError: "음수 부동 소수점 숫자 형식이 올바르지 않습니다." }); <BR> $("#fffds").formValidator({ onShow: "음수가 아닌 부동 소수점 숫자를 입력하세요.", onCorrent: "협조해 주셔서 감사합니다. 음수가 아닌 부동 소수점 숫자가 맞습니다." }).regexValidator({ regExp: "decmal4", dataType: "enum", onError: "음수가 아닌 부동 소수점 숫자의 형식이 잘못되었습니다." }) <BR>$("#fzfds").formValidator({ onShow: "양수가 아닌 부동 소수점 숫자를 입력하세요", onCordirect: "감사합니다. 협조해 주셔서 양수가 아닌 부동 소수점 숫자가 정확해졌습니다." }).regexValidator({ regExp: "decmal5", dataType: "enum ", onError: "양수가 아닌 부동 소수점 숫자의 형식이 잘못되었습니다." }); <BR>$("# ys").formValidator({ onShow: "16진수 색상을 입력하세요.", onCordirect: "감사합니다. 협력을 위해 16진수 색상이 정확합니다." }).regexValidator({ regExp: "color", dataType: "enum ", onError: "16진수 색상 형식이 잘못되었습니다." }); <BR>$("#yb" ).formValidator({ onShow: "우편번호를 입력하세요.", onfocus: "6자리 숫자로 구성되어 있습니다.", onCorrent: "협조해 주셔서 감사합니다. 우편번호가 정확합니다." }).regexValidator({ regExp: "zipcode ", dataType: "enum", onError: "우편번호 형식이 잘못되었습니다." }); <BR>$("#ip4" ).formValidator({ onShow: "ip4를 입력하세요", onfocus: "예: 172.16 .201.18", onCordirect: "협조해 주셔서 감사합니다. 귀하의 IP4는 정확합니다." }).regexValidator({ regExp: "ip4", dataType: "enum", onError: "ip4 형식이 올바르지 않습니다" }); <BR> $("#fk").formValidator({ onShow: "공백이 아닌 문자를 입력해 주세요.", onCorrent: "협조해 주셔서 감사합니다. 빈 문자가 맞습니다." }).regexValidator({ regExp: "notempty" , dataType: "enum", onError: "비어 있지 않은 문자의 형식이 잘못되었습니다." }) <BR>$("#tp").formValidator({ onShow: "사진 이름을 입력하세요.", onCordirect: "협조해 주셔서 감사합니다. 사진 이름이 정확합니다." }).regexValidator({ regExp: "picture", dataType: "enum", onError: "사진 이름 형식이 잘못되었습니다." }); <BR>$("#rar").formValidator({ onShow: "请输入压缩文件名", onCorrect: "谢谢你的合作,你的压缩文件名正确" }).regexValidator({ regExp: "rar", dataType: "enum", onError: "压缩文件名格式不正确" }); <BR>$("#qq").formValidator({ onShow: "请输入QQ号码", onCorrect: "谢谢你的合作,你的QQ号码正确" }).regexValidator({ regExp: "qq", dataType: "enum", onError: "QQ号码格式不正确" }); <BR>$("#dh").formValidator({ onShow: "请输入国内电话", onfocus: "例如:0577-88888888或省略区号88888888", onCorrect: "谢谢你的合作,你的国内电话正确" }).regexValidator({ regExp: "tel", dataType: "enum", onError: "国内电话格式不正确" }); <BR>$("#yhm").formValidator({ onShow: "请输入用户名", onCorrect: "谢谢你的合作,你的用户名正确" }).regexValidator({ regExp: "username", dataType: "enum", onError: "用户名格式不正确" }); <BR>$("#zm").formValidator({ onShow: "请输入字母", onCorrect: "谢谢你的合作,你的字母正确" }).regexValidator({ regExp: "letter", dataType: "enum", onError: "字母格式不正确" }); <BR>$("#dxzm").formValidator({ onShow: "请输入大写字母", onCorrect: "谢谢你的合作,你的大写字母正确" }).regexValidator({ regExp: "letter_u", dataType: "enum", onError: "大写字母格式不正确" }); <BR>$("#xxzm").formValidator({ onShow: "请输入小写字母", onCorrect: "谢谢你的合作,你的小写字母正确" }).regexValidator({ regExp: "letter_l", dataType: "enum", onError: "小写字母格式不正确" }); <BR>$("#sfz").formValidator({ onShow: "请输入身份证", onCorrect: "谢谢你的合作,你的身份证正确" }).regexValidator({ regExp: "idcard", dataType: "enum", onError: "身份证格式不正确" }); <BR>}); <BR></script>

5.效果图:

 
6.<script>中函数参数说明:</script>

身份证(正则表达式库):
身份证(外部函数):
整数:
正整数:
负整数:
数字:
正数(正整数 + 0):
负数(负整数 + 0):
浮点数:
正浮点数:
负浮点数:
非负浮点数(正浮点数 + 0):
非正浮点数(负浮点数 + 0):
颜色:
你的EMAIL:
手机:
邮编:
非空:
图片:
压缩文件:
ip4:
QQ号码:
国内电话:
用户名:
字母:
大写字母:
小写字母:
身份证:
formValidator: 用来做初始化的类型,必须先执行。("√"为showalert可用参数)
属性 属性名称 默认值 showalert 详细解释
validatorgroup 校验组 "1" 一个页面的控件可以分成多个组,分开校验
empty 是否可以为空 false  
automodify 输入错误离开焦点的时候,自动修复错误 true 先给出提示然后,自动修复,目前只支持text、file、textarea三种类型
onempty 空时候的提示 "输入内容为空"   可以为空,为空时候的提示。为空者不显示
onshow 显示时候的提示 "请输入内容"   为空者不显示
onfocus 获得焦点的提示 "请输入内容"   为空者不显示
oncorrect 输入正确后的提示 "输入正确"   当你焦点离开控件的时候,如果输入正确将出现该提示。为空者不显示
tipid 显示错误的容器ID 表单ID+"Tip"   如果不自动构建提示层,表示提示成的ID号
如果自动构建提示层,表示提示层相对的目标控件
tipcss 自动构建的提示层的样式 "left":"10px",
"top":"1px",
"height":"20px",
"width":"250px"
  主要用于定位自动构建的提示层
forcevalid 强制输入的值必须有效 true 是否把一个全角字符当做2个长度的参数
ajax 提交服务器 true ajaxValidator是否把该表单提交给服务器
defaultvalue 默认值 null 所有input和select表单。如果你不设置就保持原值,一旦设置就设为默认值。
triggerevent 默认值 blur 当前支持2种属性值:
blur:失去焦点的时候触发
change:当输入框里的值发生改变的时候触发
       
inputValidator:  
属性 属性名称 默认值 详细解释
type 比较类型 "size" (对select无效)
"size":表示比较长度 ,默认值
"number":数值型比较
"string":字符型比较
"date":短日期类型
"datetime":长日期类型
min 最小长度/值 0 默认数值型。如果进行字符比较,请收入字符型
对select-one而言inputValidator里的参数min和max表示选择的索引号范围
对select-multiple而言inputValidator里的参数min和max表示选择的个数
max 最大长度/值 99999999999 同上
onerror 发生错误的提示 "输入错误" 为空者不显示。
onerrormin 比min属性小的提示 null 当用户输入的值比min属性小的时候的错误提示
onerrormax 比max属性大的提示 null 当用户输入的值比max属性大的时候的错误提示
empty 控件文本值是否允许两边为空 两边都允许出现空 默认值{leftempty:true,rightempty:true,emptyerror:null}
leftempty:表示左边是否允许为空
rightempty:表示右边是否允许为空
emptyerror:出现该错误的时候的提示,如果为null,则利用onerror属性来提示错误。
       
compareValidator:  
属性 属性名称 默认值 详细解释
desid 要比较控件的ID "" 要跟源目标进行比较的目标ID
operateor 比较符号 "=" 一共有如下几种类型:=、!=、>、>=、
datatype 数据类型 "string" 目前只支持2种:"string"、"number","datetime","date"
onerror 发生错误的提示 "输入错误" 为空者不显示。
       
regexValidator:  
属性 属性名称 默认值 详细解释
regexp 正则表达式或表达式数组 "" 采用的是显式构造函数new RegExp("pattern"[,"flags"]); 由于Javascript 中'\' 被用作转义字符,所以在使用显示构造函数构造实例对象的时候,需要使用'\\' 代替'\'
param 附加参数 "i" g:代表可以进行全局匹配。
i:代表不区分大小写匹配。
m:代表可以进行多行匹配。
可以任意组合,当然也可以不加参数
comparetype 比较类型 "||" "||"或的关系   "&&"并列
datatype 数据类型 "string" "string":自己写的表达式,"enum":枚举名。具体请见demo3.htm
你可以自己修改、添加formValidatorRegex.js里的枚举项目名和表达式。
onerror: 发生错误的提示 "输入错误" 为空者不显示。
       
ajaxValidator: 几乎所有的属性跟$.ajax()的属性一样,请参考$.ajax()函数的帮助
属性 属性名称 默认值 详细解释
type 请求的类型 "GET" "POST" 或 "GET"
url 发送到的URL地址 "" 在服务器端,你可以通过name为clientid获取触发验证的控件ID名
datatype 返回的数据类型 "html" xml、html、script、json、text
timeout 超时设置 999  
data 数据 ""  
async 是否以异步的方式发送 true  
success 当请求成功时调用的函数 null  
processdata 自动处理返回的数据为字符串 true 在默认的情况下,如果data选项传进的数据是一个对象而不是字符串,将会自动地被处理和转换成一个查询字符串
complete 当请求完成时调用的函数 null  
beforesend 当请求前时调用的函数 null 有个一个参数,根$.ajax里的beforeSend参数一样。
buttons 你点提交的按钮(组)jQuery对象 null 当你触发了ajax校验,buttons里对应的按钮(组)就会灰掉,一直等待服务器返回数据为止
error 当请求失败时调用的函数 "请求失败" 你可以自己定义这个错误,在error里自动打出。为空者不显示。
 
functionValidator
属性 属性名称 默认值 返回值的解释
fun 外部函数名()
参数1:元素的值,
参数2:元素对象
默认当作处理过程
true/false 校验成功/失败
字符串 校验失败,返回值当作自定义错误
处理过程
onerror 发生错误的提示 "输入错误" 函数return false的时候,显示该错误信息
   
公共函数: 主要是设置全局参数和判断是否通过校验
函数名 函数说明
$.formValidator.initConfig 参数:配置类型
属性 默认值 说明
validatorgroup "1" 你要针对哪个组进行配置
formid "" 要自动注册pageIsValid函数的表单ID号
alertmessage false 是否弹出窗口
autotip false 是否自动构建提示层
errorfocus true 发生错误的时候,第一个出错控件是否获得焦点
forcevalid true 是否一直输入正确为止才允许离开焦点
wideword true 是否把一个全角字符当做2个长度
onsuccess null 该组校验通过后的回调函数,返回false,阻止表单的提交
submitonce false 校验通过后,是否灰掉所有的提交按钮
onerror null 该组校验失败后的回调函数, 有两个参数
参数1 一个校验没有通过的错误信息
参数2 一个校验没有通过的元素对象
参数3 所有的错误信息数组,你可以通过$.map来遍历
debug false 是否处于调试模式。true:不提交表单
$.formValidator.pageIsValid 一个参数: 不是配置类型
validatorgroup "1" 你要针对哪个组进行验证
$.formValidator.isOneValid 一个参数: 当时设置验证的表单元素ID。
返回是否校验成功的信息。
$.formValidator.setFailState function("tipid","显示的信息")
在showword模式下,如果你的额外校验没有通过,你可以通过它来设置成失败信息和状态
$.formValidator.getLength function("表单元素id")
checkbox或radiobutton表示(同组)选择的个数。
对select-one,选择索引的值
对select-multiple,inputValidator里的参数min和max表示选择的个数
其它input表示的表示字符长度。
$.formValidator.retSetTipState function(校验组号) 来把该组的提示内容恢复到onshow状态
$.formValidator.reloadAutoTip 重新定位自动构建的提示层
formValidator: 用来做初始化的类型,必须先执行。("√"为showalert可用参数)
属性 属性名称 默认值 showalert 详细解释
validatorgroup 校验组 "1" 一个页面的控件可以分成多个组,分开校验
empty 是否可以为空 false  
automodify 输入错误离开焦点的时候,自动修复错误 true 先给出提示然后,自动修复,目前只支持text、file、textarea三种类型
onempty 空时候的提示 "输入内容为空"   可以为空,为空时候的提示。为空者不显示
onshow 显示时候的提示 "请输入内容"   为空者不显示
onfocus 获得焦点的提示 "请输入内容"   为空者不显示
oncorrect 输入正确后的提示 "输入正确"   当你焦点离开控件的时候,如果输入正确将出现该提示。为空者不显示
tipid 显示错误的容器ID 表单ID+"Tip"   如果不自动构建提示层,表示提示成的ID号
如果自动构建提示层,表示提示层相对的目标控件
tipcss 自动构建的提示层的样式 "left":"10px",
"top":"1px",
"height":"20px",
"width":"250px"
  主要用于定位自动构建的提示层
forcevalid 强制输入的值必须有效 true 是否把一个全角字符当做2个长度的参数
ajax 提交服务器 true ajaxValidator是否把该表单提交给服务器
defaultvalue 默认值 null 所有input和select表单。如果你不设置就保持原值,一旦设置就设为默认值。
triggerevent 默认值 blur 当前支持2种属性值:
blur:失去焦点的时候触发
change:当输入框里的值发生改变的时候触发
       
inputValidator:  
属性 属性名称 默认值 详细解释
type 比较类型 "size" (对select无效)
"size":表示比较长度 ,默认值
"number":数值型比较
"string":字符型比较
"date":短日期类型
"datetime":长日期类型
min 最小长度/值 0 默认数值型。如果进行字符比较,请收入字符型
对select-one而言inputValidator里的参数min和max表示选择的索引号范围
对select-multiple而言inputValidator里的参数min和max表示选择的个数
max 最大长度/值 99999999999 同上
onerror 发生错误的提示 "输入错误" 为空者不显示。
onerrormin 比min属性小的提示 null 当用户输入的值比min属性小的时候的错误提示
onerrormax 比max属性大的提示 null 当用户输入的值比max属性大的时候的错误提示
empty 控件文本值是否允许两边为空 两边都允许出现空 默认值{leftempty:true,rightempty:true,emptyerror:null}
leftempty:表示左边是否允许为空
rightempty:表示右边是否允许为空
emptyerror:出现该错误的时候的提示,如果为null,则利用onerror属性来提示错误。
       
compareValidator:  
属性 属性名称 默认值 详细解释
desid 要比较控件的ID "" 要跟源目标进行比较的目标ID
operateor 比较符号 "=" 一共有如下几种类型:=、!=、>、>=、
datatype 数据类型 "string" 目前只支持2种:"string"、"number","datetime","date"
onerror 发生错误的提示 "输入错误" 为空者不显示。
       
regexValidator:  
属性 属性名称 默认值 详细解释
regexp 正则表达式或表达式数组 "" 采用的是显式构造函数new RegExp("pattern"[,"flags"]); 由于Javascript 中'\' 被用作转义字符,所以在使用显示构造函数构造实例对象的时候,需要使用'\\' 代替'\'
param 附加参数 "i" g:代表可以进行全局匹配。
i:代表不区分大小写匹配。
m:代表可以进行多行匹配。
可以任意组合,当然也可以不加参数
comparetype 比较类型 "||" "||"或的关系   "&&"并列
datatype 数据类型 "string" "string":自己写的表达式,"enum":枚举名。具体请见demo3.htm
你可以自己修改、添加formValidatorRegex.js里的枚举项目名和表达式。
onerror: 发生错误的提示 "输入错误" 为空者不显示。
       
ajaxValidator: 几乎所有的属性跟$.ajax()的属性一样,请参考$.ajax()函数的帮助
属性 属性名称 默认值 详细解释
type 请求的类型 "GET" "POST" 或 "GET"
url 发送到的URL地址 "" 在服务器端,你可以通过name为clientid获取触发验证的控件ID名
datatype 返回的数据类型 "html" xml、html、script、json、text
timeout 超时设置 999  
data 数据 ""  
async 是否以异步的方式发送 true  
success 当请求成功时调用的函数 null  
processdata 自动处理返回的数据为字符串 true 在默认的情况下,如果data选项传进的数据是一个对象而不是字符串,将会自动地被处理和转换成一个查询字符串
complete 当请求完成时调用的函数 null  
beforesend 当请求前时调用的函数 null 有个一个参数,根$.ajax里的beforeSend参数一样。
buttons 你点提交的按钮(组)jQuery对象 null 当你触发了ajax校验,buttons里对应的按钮(组)就会灰掉,一直等待服务器返回数据为止
error 当请求失败时调用的函数 "请求失败" 你可以自己定义这个错误,在error里自动打出。为空者不显示。
 
functionValidator
属性 属性名称 默认值 返回值的解释
fun 外部函数名()
参数1:元素的值,
参数2:元素对象
默认当作处理过程
true/false 校验成功/失败
字符串 校验失败,返回值当作自定义错误
处理过程
onerror 发生错误的提示 "输入错误" 函数return false的时候,显示该错误信息
   
公共函数: 主要是设置全局参数和判断是否通过校验
函数名 函数说明
$.formValidator.initConfig 参数:配置类型
属性 默认值 说明
validatorgroup "1" 你要针对哪个组进行配置
formid "" 要自动注册pageIsValid函数的表单ID号
alertmessage false 是否弹出窗口
autotip false 是否自动构建提示层
errorfocus true 发生错误的时候,第一个出错控件是否获得焦点
forcevalid true 是否一直输入正确为止才允许离开焦点
wideword true 是否把一个全角字符当做2个长度
onsuccess null 该组校验通过后的回调函数,返回false,阻止表单的提交
submitonce false 校验通过后,是否灰掉所有的提交按钮
onerror null 该组校验失败后的回调函数, 有两个参数
参数1 一个校验没有通过的错误信息
参数2 一个校验没有通过的元素对象
参数3 所有的错误信息数组,你可以通过$.map来遍历
debug false 是否处于调试模式。true:不提交表单
$.formValidator.pageIsValid 一个参数: 不是配置类型
validatorgroup "1" 你要针对哪个组进行验证
$.formValidator.isOneValid 一个参数: 当时设置验证的表单元素ID。
返回是否校验成功的信息。
$.formValidator.setFailState function("tipid","显示的信息")
在showword模式下,如果你的额外校验没有通过,你可以通过它来设置成失败信息和状态
$.formValidator.getLength function("表单元素id")
checkbox或radiobutton表示(同组)选择的个数。
对select-one,选择索引的值
对select-multiple,inputValidator里的参数min和max表示选择的个数
其它input表示的表示字符长度。
$.formValidator.retSetTipState function(校验组号) 来把该组的提示内容恢复到onshow状态
$.formValidator.reloadAutoTip 重新定位自动构建的提示层
formValidator: 用来做初始化的类型,必须先执行。("√"为showalert可用参数)
属性 属性名称 默认值 showalert 详细解释
validatorgroup 校验组 "1" 一个页面的控件可以分成多个组,分开校验
empty 是否可以为空 false  
automodify 输入错误离开焦点的时候,自动修复错误 true 先给出提示然后,自动修复,目前只支持text、file、textarea三种类型
onempty 空时候的提示 "输入内容为空"   可以为空,为空时候的提示。为空者不显示
onshow 显示时候的提示 "请输入内容"   为空者不显示
onfocus 获得焦点的提示 "请输入内容"   为空者不显示
oncorrect 输入正确后的提示 "输入正确"   当你焦点离开控件的时候,如果输入正确将出现该提示。为空者不显示
tipid 显示错误的容器ID 表单ID+"Tip"   如果不自动构建提示层,表示提示成的ID号
如果自动构建提示层,表示提示层相对的目标控件
tipcss 自动构建的提示层的样式 "left":"10px",
"top":"1px",
"height":"20px",
"width":"250px"
  主要用于定位自动构建的提示层
forcevalid 强制输入的值必须有效 true 是否把一个全角字符当做2个长度的参数
ajax 提交服务器 true ajaxValidator是否把该表单提交给服务器
defaultvalue 默认值 null 所有input和select表单。如果你不设置就保持原值,一旦设置就设为默认值。
triggerevent 默认值 blur 当前支持2种属性值:
blur:失去焦点的时候触发
change:当输入框里的值发生改变的时候触发
       
inputValidator:  
属性 属性名称 默认值 详细解释
type 比较类型 "size" (对select无效)
"size":表示比较长度 ,默认值
"number":数值型比较
"string":字符型比较
"date":短日期类型
"datetime":长日期类型
min 最小长度/值 0 默认数值型。如果进行字符比较,请收入字符型
对select-one而言inputValidator里的参数min和max表示选择的索引号范围
对select-multiple而言inputValidator里的参数min和max表示选择的个数
max 最大长度/值 99999999999 同上
onerror 发生错误的提示 "输入错误" 为空者不显示。
onerrormin 比min属性小的提示 null 当用户输入的值比min属性小的时候的错误提示
onerrormax 比max属性大的提示 null 当用户输入的值比max属性大的时候的错误提示
empty 控件文本值是否允许两边为空 两边都允许出现空 默认值{leftempty:true,rightempty:true,emptyerror:null}
leftempty:表示左边是否允许为空
rightempty:表示右边是否允许为空
emptyerror:出现该错误的时候的提示,如果为null,则利用onerror属性来提示错误。
       
compareValidator:  
属性 属性名称 默认值 详细解释
desid 要比较控件的ID "" 要跟源目标进行比较的目标ID
operateor 比较符号 "=" 一共有如下几种类型:=、!=、>、>=、
datatype 数据类型 "string" 目前只支持2种:"string"、"number","datetime","date"
onerror 发生错误的提示 "输入错误" 为空者不显示。
       
regexValidator:  
属性 属性名称 默认值 详细解释
regexp 正则表达式或表达式数组 "" 采用的是显式构造函数new RegExp("pattern"[,"flags"]); 由于Javascript 中'\' 被用作转义字符,所以在使用显示构造函数构造实例对象的时候,需要使用'\\' 代替'\'
param 附加参数 "i" g:代表可以进行全局匹配。
i:代表不区分大小写匹配。
m:代表可以进行多行匹配。
可以任意组合,当然也可以不加参数
comparetype 比较类型 "||" "||"或的关系   "&&"并列
datatype 数据类型 "string" "string":自己写的表达式,"enum":枚举名。具体请见demo3.htm
你可以自己修改、添加formValidatorRegex.js里的枚举项目名和表达式。
onerror: 发生错误的提示 "输入错误" 为空者不显示。
       
ajaxValidator: 几乎所有的属性跟$.ajax()的属性一样,请参考$.ajax()函数的帮助
属性 属性名称 默认值 详细解释
type 请求的类型 "GET" "POST" 或 "GET"
url 发送到的URL地址 "" 在服务器端,你可以通过name为clientid获取触发验证的控件ID名
datatype 返回的数据类型 "html" xml、html、script、json、text
timeout 超时设置 999  
data 数据 ""  
async 是否以异步的方式发送 true  
success 当请求成功时调用的函数 null  
processdata 自动处理返回的数据为字符串 true 在默认的情况下,如果data选项传进的数据是一个对象而不是字符串,将会自动地被处理和转换成一个查询字符串
complete 当请求完成时调用的函数 null  
beforesend 当请求前时调用的函数 null 有个一个参数,根$.ajax里的beforeSend参数一样。
buttons 你点提交的按钮(组)jQuery对象 null 当你触发了ajax校验,buttons里对应的按钮(组)就会灰掉,一直等待服务器返回数据为止
error 当请求失败时调用的函数 "请求失败" 你可以自己定义这个错误,在error里自动打出。为空者不显示。
 
functionValidator
属性 属性名称 默认值 返回值的解释
fun 外部函数名()
参数1:元素的值,
参数2:元素对象
默认当作处理过程
true/false 校验成功/失败
字符串 校验失败,返回值当作自定义错误
处理过程
onerror 发生错误的提示 "输入错误" 函数return false的时候,显示该错误信息
   
公共函数: 主要是设置全局参数和判断是否通过校验
函数名 函数说明
$.formValidator.initConfig 参数:配置类型
属性 默认值 说明
validatorgroup "1" 你要针对哪个组进行配置
formid "" 要自动注册pageIsValid函数的表单ID号
alertmessage false 是否弹出窗口
autotip false 是否自动构建提示层
errorfocus true 发生错误的时候,第一个出错控件是否获得焦点
forcevalid true 是否一直输入正确为止才允许离开焦点
wideword true 是否把一个全角字符当做2个长度
onsuccess null 该组校验通过后的回调函数,返回false,阻止表单的提交
submitonce false 校验通过后,是否灰掉所有的提交按钮
onerror null 该组校验失败后的回调函数, 有两个参数
参数1 一个校验没有通过的错误信息
参数2 一个校验没有通过的元素对象
参数3 所有的错误信息数组,你可以通过$.map来遍历
debug false 是否处于调试模式。true:不提交表单
$.formValidator.pageIsValid 一个参数: 不是配置类型
validatorgroup "1" 你要针对哪个组进行验证
$.formValidator.isOneValid 一个参数: 当时设置验证的表单元素ID。
返回是否校验成功的信息。
$.formValidator.setFailState function("tipid","显示的信息")
在showword模式下,如果你的额外校验没有通过,你可以通过它来设置成失败信息和状态
$.formValidator.getLength function("表单元素id")
checkbox或radiobutton表示(同组)选择的个数。
对select-one,选择索引的值
对select-multiple,inputValidator里的参数min和max表示选择的个数
其它input表示的表示字符长度。
$.formValidator.retSetTipState function(校验组号) 来把该组的提示内容恢复到onshow状态
$.formValidator.reloadAutoTip 重新定位自动构建的提示层

6. 수정 지침 추가:
코드 복사 코드는 다음과 같습니다.

$.formValidator.reloadAutoTip(); //양식 유효성 검사 스타일 다시 로드
if(!$.formValidator.pageIsValid('1')) return false; 제출하지 마세요

코드 복사 코드는 다음과 같습니다.

$(document).ready(function () {
$.formValidator.initConfig({ formID: "form1", onError: function () { Alert("확인에 실패했습니다. 특정 오류에 대해서는 오류 메시지를 참조하십시오.") } });
$("# name").formValidator({ onShow: "이름을 입력하세요!", onFocus: "1~10자를 입력하세요.", onCordirect: "입력이 정확합니다. 감사합니다. 협력!" }).inputValidator({ min: 1, max: 20, onError: "입력 길이가 잘못되었습니다!" });
$("#timelong").formValidator({ onShow: "입력 길이를 입력하세요. 로드쇼 기간!", onFocus: "입력 형식은 양의 정수입니다!", onCordirect: "입력이 정확합니다. 협조해 주셔서 감사합니다!" }).regexValidator({ regExp:"intege1",dataType: "enum" , onError: "입력한 기간 형식이 잘못되었습니다!" })
$( "#address").formValidator({ onShow: "로드쇼 플랫폼 이름을 입력하세요!", onFocus: "다음을 입력하세요. 50자", onCordirect: "입력이 정확합니다. 협조해 주셔서 감사합니다!" }).inputValidator({ min: 1, max: 50, onError: "입력 길이가 잘못되었습니다!" });
$ ("#urladdress").formValidator({ onShow: "로드쇼 링크 주소를 입력하세요!", onFocus: "입력 형식 :http://www.baidu.com", onCordirect: "입력이 정확합니다. 감사합니다. 협조해 주세요! " }).regexValidator({ regExp:"^(http|https|ftp)://([a-zA- Z0-9.-] (:[a-zA-Z0-9.&%$ -] )*@)*((25[0-5]|2[0-4][0-9]|[0 -1]{1}[0-9]{2}|[1-9] {1}[0-9]{1}|[1-9]).(25[0-5]|2[0 -4][0-9]|[0-1]{1}[0- 9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0 ).(25[0-5]|2[0-4][0-9 ]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0).(25[0- 5]|2[0-4][0-9]|[0-1]{1}[0-9]{2 }|[1-9]{1}[0-9]{1}|[ 0-9])|localhost|([a-zA-Z0-9-] .)*[a-zA-Z0-9 -] .(com|edu|gov|int|mil|net|org|biz| arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0 -9] )*(/($|[a-zA-Z0-9., ?'\ &%$#=~_-] ))*$", onError: "입력 형식이 잘못되었습니다! " });
$("#time").formValidator({ onCordirect: "형식이 정확합니다." }).functionValidator({fun:isDateTime, onError: "입력 형식이 잘못되었습니다!" });
$ ("#txtcontent").formValidator({ onShow: "전문가 소개를 입력해주세요!", onFocus: "1~100자까지 입력하세요", onCordirect: "입력이 정확합니다. 협조해 주셔서 감사합니다!" }).inputValidator({ min: 1, max: 100, onError: "입력 길이가 잘못되었습니다!" })
})
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
JavaScript 데이터 유형 : 브라우저와 Nodejs 사이에 차이가 있습니까?JavaScript 데이터 유형 : 브라우저와 Nodejs 사이에 차이가 있습니까?May 14, 2025 am 12:15 AM

JavaScript 코어 데이터 유형은 브라우저 및 Node.js에서 일관되지만 추가 유형과 다르게 처리됩니다. 1) 글로벌 객체는 브라우저의 창이고 node.js의 글로벌입니다. 2) 이진 데이터를 처리하는 데 사용되는 Node.js의 고유 버퍼 객체. 3) 성능 및 시간 처리에는 차이가 있으며 환경에 따라 코드를 조정해야합니다.

JavaScript 댓글 : / / * * /사용 안내서JavaScript 댓글 : / / * * /사용 안내서May 13, 2025 pm 03:49 PM

javaScriptUSTWOTYPESOFSOFCOMMENTS : 단일 라인 (//) 및 multi-line (//)

Python vs. JavaScript : 개발자를위한 비교 분석Python vs. JavaScript : 개발자를위한 비교 분석May 09, 2025 am 12:22 AM

Python과 JavaScript의 주요 차이점은 유형 시스템 및 응용 프로그램 시나리오입니다. 1. Python은 과학 컴퓨팅 및 데이터 분석에 적합한 동적 유형을 사용합니다. 2. JavaScript는 약한 유형을 채택하며 프론트 엔드 및 풀 스택 개발에 널리 사용됩니다. 두 사람은 비동기 프로그래밍 및 성능 최적화에서 고유 한 장점을 가지고 있으며 선택할 때 프로젝트 요구 사항에 따라 결정해야합니다.

Python vs. JavaScript : 작업에 적합한 도구 선택Python vs. JavaScript : 작업에 적합한 도구 선택May 08, 2025 am 12:10 AM

Python 또는 JavaScript를 선택할지 여부는 프로젝트 유형에 따라 다릅니다. 1) 데이터 과학 및 자동화 작업을 위해 Python을 선택하십시오. 2) 프론트 엔드 및 풀 스택 개발을 위해 JavaScript를 선택하십시오. Python은 데이터 처리 및 자동화 분야에서 강력한 라이브러리에 선호되는 반면 JavaScript는 웹 상호 작용 및 전체 스택 개발의 장점에 없어서는 안될 필수입니다.

파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다May 06, 2025 am 12:15 AM

파이썬과 자바 스크립트는 각각 고유 한 장점이 있으며 선택은 프로젝트 요구와 개인 선호도에 따라 다릅니다. 1. Python은 간결한 구문으로 데이터 과학 및 백엔드 개발에 적합하지만 실행 속도가 느립니다. 2. JavaScript는 프론트 엔드 개발의 모든 곳에 있으며 강력한 비동기 프로그래밍 기능을 가지고 있습니다. node.js는 풀 스택 개발에 적합하지만 구문은 복잡하고 오류가 발생할 수 있습니다.

JavaScript의 핵심 : C 또는 C에 구축 되었습니까?JavaScript의 핵심 : C 또는 C에 구축 되었습니까?May 05, 2025 am 12:07 AM

javaScriptisNotBuiltoncorc; it'SangretedLanguageThatrunsonOngineStenWrittenInc .1) javaScriptWasDesignEdasAlightweight, 해석 hanguageforwebbrowsers.2) Endinesevolvedfromsimpleplemporectreterstoccilpilers, 전기적으로 개선된다.

JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지May 04, 2025 am 12:12 AM

JavaScript는 프론트 엔드 및 백엔드 개발에 사용할 수 있습니다. 프론트 엔드는 DOM 작업을 통해 사용자 경험을 향상시키고 백엔드는 Node.js를 통해 서버 작업을 처리합니다. 1. 프론트 엔드 예 : 웹 페이지 텍스트의 내용을 변경하십시오. 2. 백엔드 예제 : node.js 서버를 만듭니다.

Python vs. JavaScript : 어떤 언어를 배워야합니까?Python vs. JavaScript : 어떤 언어를 배워야합니까?May 03, 2025 am 12:10 AM

Python 또는 JavaScript는 경력 개발, 학습 곡선 및 생태계를 기반으로해야합니다. 1) 경력 개발 : Python은 데이터 과학 및 백엔드 개발에 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 적합합니다. 2) 학습 곡선 : Python 구문은 간결하며 초보자에게 적합합니다. JavaScript Syntax는 유연합니다. 3) 생태계 : Python에는 풍부한 과학 컴퓨팅 라이브러리가 있으며 JavaScript는 강력한 프론트 엔드 프레임 워크를 가지고 있습니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구