jquery verify.js 양식 유효성 검사 입력 예(소스 코드 포함)

jquery verify.js 양식 유효성 검사 입력 예(소스 코드 포함)_jquery

WBOY

풀어 주다： 2016-05-16 15:32:58

원래의

1328명이 탐색했습니다.

편집자는 인터넷에서 jquery.validate에 대한 많은 기사를 읽었습니다. 대부분은 API와 사용법에 대한 소개만 오랫동안 공부했는데도 시작하지 못합니다. 이를 위해 편집자는 jquery verify.js 양식 유효성 검사에 대한 소개 예제를 작성했습니다. 글이 특별히 좋지는 않지만 초보자에게 적합해야 하며 모든 사람과 공유하고 싶습니다.

다음은 Validate.js 양식 검증 입력 예시의 참고 소스코드입니다. 소스코드 다운로드 주소는 글 아래에 있습니다.

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>j2query.validate快速入门范例-代潇瑞博客</title>
 <meta name="keywords" content="" />
 <meta name="description" content="jquery.validate.js是一个强大的表单验证插件，这里将来个快速入门范例，展示它的快速易用性。" />
 <script src="jquery-1.8.0.min.js" type="text/javascript"></script>
 <script src="jquery.validate.min.js" type="text/javascript"></script>
 <style type="text/css">
 label.error{color:red;font-size:13px;}
 </style>
</head>
<body>
 <p>信息录入</p>
 <form action="" name="infos" id="infos">
 <p>用户名：<input type="text" name="username" /></p>
 <p>工作号：<input type="text" name="nums" /></p>
 <p>备 注：<input type="text" name="notes" /></p>
 <p><input type="submit" name="sub" /></p>
 </form>
 <script type="text/javascript">
 $(function(){
 $('#infos').validate({
 debug:false, //false表示验证通过后不要自动提交表单
 onkeyup:false, //表示关闭按键松开时候监听验证
 rules:{ //验证规则
 username:{
 required:true, //必填字段
 rangelength:[6,10] //长度在6-10之间
 },
 nums:{
 required:true,
 digits:true
 },
 notes:"required"
 },
 messages:{ //自定义错误信息，默认为英文，除了在这里配置以为，还可以通过配置文件进行配置
 username:{
 required:"用户名必填",
 rangelength:"用户名长度必须为6-10位"
 },
 nums:{
 required:"工作号必填",
 digits:"工作号必须为数字"
 },
 notes:"备注必填"
 },
 //验证通过可以在这里做你想做的事情
 submitHandler:function(form){
 alert("验证通过");
 }
 });
 });
 </script>
</body>
</html>

로그인 후 복사

소스 코드 다운로드: jquery verify.js 양식 유효성 검사 입력 예시

데모 주소: jquery verify.js 양식 유효성 검사 입력 예시

위 내용은 누구나 함께 학습할 수 있는 간단한 jquery verify.js 양식 검증 입문 예제입니다. 모두의 학습에 도움이 되기를 바랍니다.