• 注册页面中,验证有效合法性




    @{ ViewBag.Title = "注册"; } <div id="reg"> <form id="frmregister" class="form-horizontal"> <fieldset> <legend class="form-signin-heading">帐号注册</legend> <div class="control-group"> <label class="control-label" for="username">用户名</label> <div class="controls"> <input type="text" autocomplete="off" class="input-xlarge" name="username" id="username"> </div> </div> <div class="control-group"> <label class="control-label" for="pwd">密码</label> <div class="controls"> <input type="password" class="input-xlarge" name="pwd" id="pwd"> </div> </div> <div class="control-group"> <label class="control-label" for="pwda">确认密码</label> <div class="controls"> <input type="password" class="input-xlarge" name="pwda" id="pwda"> </div> </div> <div class="control-group"> <label class="control-label" for="email">电子邮件</label> <div class="controls"> <input type="text" autocomplete="off" class="input-xlarge" name="email" id="email"> </div> </div> <div class="control-group"> <label class="control-label" for="verifycode">验证码</label> <div class="controls"> <input type="text" autocomplete="off" class="input-large" name="verifycode" id="verifycode"> <img src="/VerificationCode/Index" id="verifycode_img" /> </div> </div> <div class="control-group"> <div class="controls"> <button id="register" type="submit" class="btn btn-success">注册</button> <img src="~/Images/loading.gif" id="loding" style="display: none" /> </div> </div> </fieldset> </form> <div style="display: none; margin-left: auto; margin-right: auto; height: 400px;" id="activeinfo"> <div class="alert alert-success"> <p>帐号注册成功</p> <p>请登录邮箱进行激活帐号</p> </div> </div> </div> @section scripts{ <script src="~/Scripts/jquery.validate.min.js"></script> <script src="~/Scripts/jquery.form.js"></script> <script type="text/javascript"> jQuery.validator.addMethod("username", function (value, element) { var val = /^[a-zA-Z][w]{4,11}$/; return this.optional(element) || (val.test(value)); }, "请输入合法用户名"); jQuery.validator.addMethod("userpwd", function (value, element) { var val = /^[w]{6,15}$/; return this.optional(element) || (val.test(value)); }, "密码为6到15位"); jQuery.validator.addMethod("code", function (value, element) { var val = /^[0-9a-zA-Z]{4}$/; return this.optional(element) || (val.test(value)); }, "验证码由4位数字或字母组成"); $(function () { $("#verifycode_img").click(function () { showverifycode(); }); function showverifycode() { var numkey = Math.random() + (new Date().getDate()); document.getElementById("verifycode_img").src = "/VerificationCode/Index?NumKey=" + numkey; } $("#frmregister").validate({ errorClass: "help-inline", rules: { username: { required: true, minlength: 5, username: true, remote: { type: "POST", dataType: "json", url: "/Account/UserNameExistOrNot?username=" + $("#username").val() } }, pwd: { required: true, minlength: 6, userpwd: true }, pwda: { required: true, minlength: 6, equalTo: "#pwd" }, email: { required: true, email: true, remote: { type: "POST", dataType: "json", url: "/Account/EmailExistOrNot?email=" + $("#email").val() } }, verifycode: { required: true } }, messages: { username: { required: "用户名为空", minlength: "用户名最短长度为5位", remote: "用户名已存在" }, pwd: { required: "密码为空", minlength: "密码最短长度为6位" }, pwda: { required: "密码为空", minlength: "密码最短长度为6位", equalTo: "两次输入密码不一致" }, email: { required: "电子邮件地址为空", email: "电子邮件地址格式错误", remote: "电子邮件地址已存在" }, verifycode: { required: "验证码为空" } }, highlight: function (element) { $(element).closest('.control-group').removeClass('success').addClass('error'); }, success: function (element) { element .text('OK!').addClass('valid') .closest('.control-group').removeClass('error').addClass('success'); } }); $('#frmregister').on('submit', function (e) { e.preventDefault(); if ($("#frmregister").valid()) { $(this).ajaxSubmit({ type: "post", url: "/Account/RegisterAjax", beforeSend: function () { $("#loding").show(); }, success: function (msg) { $("#loding").hide(); if (msg.Result == "OK") { $("#frmregister").hide(); $("#activeinfo").show(); } else { alert(msg.Message); } } }); } }); }); </script> }

     学习文档 http://www.runoob.com/jquery/jquery-plugin-validate.html

  • 相关阅读:
    不同地区Android开发者使用哪些设备测试APP?
    IIS6、IIS7.5设置网站默认首页方法(Directory Listing Denied)
    大数据正在改变我们的生活
    如何在MySQL中使用explain查询SQL的执行计划?
    整合spring cloud云架构
    对SQL 优化,提升性能!
    传统分布式架构如何进行容器化升级
    Android开发实践:Android.mk模板
    如何从代码层面优化系统性能
    德国又出超实用的厨房神器
  • 原文地址:https://www.cnblogs.com/loveLu/p/5772877.html
Copyright © 2020-2023  润新知