教程集 www.jiaochengji.com
教程集 >  jQuery  >  jquery 教程  >  正文 mvc中的jquery表单提交验证的代码示例

mvc中的jquery表单提交验证的代码示例

发布时间:2015-10-25   编辑:jiaochengji.com
本文介绍下,在mvc中用到的一个jquery验证实例,用于验证表单的提交。有需要的朋友,不妨参考下了。

1,juery 验证表单代码部分 
 

复制代码 代码示例:
<script type="text/javascript">
    $().ready(function() {
        $("#frmReg").validate(
        {
 /* 插件会自动在文本框后生成一个label,取标记名为'reg'
    这样可以用 reg.success{}来控制样式
    reg.success之间不要留空格
 */
            errorElement: "reg", 
            success: function(label) {
                label.text(" ").addClass("success");
            },
            rules: {
                username: {
                    required: true,
                    minlength: 2,
                    maxlength:16
                },
                email:{required:true,email:true},
                password: {
                    required: true,
                    minlength: 6,
                    maxlength:16
                },
                confirmPassword:{required:true, equalTo: "#password"},
                validate:{required:true}
             
            }
        }
        );
    });
</script>

2,html代码部分
 

复制代码 代码示例:
<form action="/Account/Register" method="post" id="frmReg">
<div class="left">
  <div class="leadInfo">请填写以下信息,全部为必填:</div>
  <div class="userInput">
   <ul class="userInfo">
        <li><span class="label">帐号:</span><input name="username" id="username"  title="中英文均可不超过8个汉字或16个字符"/></li>
     <li><span class="label">Email帐号:</span><input name="email" id="email"  title="请输入Email"/></li>
          <li><span class="label">登录密码:</span><input type="password" name="password" id="password"  title="请输入6至16位数字或字母"/></li>
    <li><span class="label">重填密码:</span><input type="password" name="confirmPassword" id="confirmPassword"  title="请重复上面的密码"/></li>
    <li>
     <div><span class="label">验证码:</span><input name="validate"  id="validate" title="请输入下面图片上的数字"/></div>
     <br /><span class="moreInfo">看不清<a href="javascript:refresh_captcha()">点此刷新</a> </span>
     <img id="captchaImage" name="captchaImage" src="/validate/VerifyCodeImage.aspx" align="absmiddle" />
    </li>
   </ul>
  </div>
  <div class="c_gray" align="center">Email帐号及昵称,注册后不能修改,请仔细核对。</div><br />
  <div class="userAction">
      <input name="Submit" id="submit" type="submit" value="完成注册" tabindex="7" class="btnNormal" />
      <input type="reset" id="reset" value="重填" tabindex="8" class="btnNormal" />
  </div>
      <div class="leadInfo">已经注册,<%= Html.ActionLink("请登陆","LogOn") %></div>
  <input type='hidden' name="gender" value="-1" />
  <input type='hidden' name="city" value="35" />
  <input type='hidden' name="cburl" value="" />
</div>
</form>

有兴趣的朋友,可以亲自动手测试下,看看效果如何吧。

您可能感兴趣的文章:
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
jValidate 基于jQuery的表单验证插件
表单验证插件 jQuery formValidator
JavaScript表单验证类库 Validate.js
Javascript MVC框架简介
JS表单提交验证实现代码
H5表单验证有哪些方法
jQuery Ajax提交表单查询获得数据实例代码
JavaScript 提交表单的实例分享
一个php表单字段格式验证类

[关闭]
~ ~