zoukankan      html  css  js  c++  java
  • 注册页面中,验证有效合法性



    @{ 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

  • 相关阅读:
    java中获取服务器的IP和端口
    springboot项目 配置https
    vue+element+upload实现头像上传
    js指定日期时间加一天 ,判断指定时间是否为周末
    在内网中 vue项目添加ECharts图表插件
    vue+element树组件 实现树懒加载
    iview 表格随着更改刷新
    vue设置input不可编辑切换
    .Net程序员学用Oracle系列(3):数据库编程规范
    .Net程序员学用Oracle系列(2):准备测试环境
  • 原文地址:https://www.cnblogs.com/loveLu/p/5772877.html
Copyright © 2011-2022 走看看