[jQuery]前台表单验证 使用jquery.validate.min.js插件

详细信息请看：http://www.runoob.com/jquery/jquery-plugin-validate.html

C# cshtml

@{
    ViewBag.Title = "登陆";
    Layout = null;
}




    "viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    
    "stylesheet" href="~/Content/styles.css">
    
    
    
    
    
    
    




    
class="login-container">
        
登陆
      

        
class="connect">
            
11111111
        
        
class="text-danger" style="text-align: center ;font-size:20px;margin:5px;color:red">@ViewData["loginerr"]
        
"/hpuAccount/Login" method="post" id="loginForm">
            

                "text" name="username" class="username" placeholder="用户名" autocomplete="off" />
            
            

                "password" name="password" class="password" placeholder="密码" οncοntextmenu="return false" οnpaste="return false" />
            
            "submit" type="submit">登 陆
        
     
       
    

View Code

common.js

//打开字滑入效果
window.onload = function(){
    $(".connect p").eq(0).animate({"left":"0%"}, 600);
    $(".connect p").eq(1).animate({"left":"0%"}, 400);
};
//jquery.validate表单验证
$(document).ready(function(){
    //登陆表单验证
    $("#loginForm").validate({
        rules:{
            username:{
                required:true,//必填
                minlength:4, //最少4个字符
                maxlength:20,//最多20个字符
            },
            password:{
                required:true,
                minlength:4, 
                maxlength:20,
            },
        },
        //错误信息提示
        messages:{
            username:{
                required:"必须填写用户名",
                minlength:"用户名至少为4个字符",
                maxlength:"用户名至多为20个字符",
                remote: "用户名已存在",
            },
            password:{
                required:"必须填写密码",
                minlength:"密码至少为4个字符",
                maxlength:"密码至多为20个字符",
            },
        },
    });
});

View Code

 

转载于:https://www.cnblogs.com/yihy/p/4958120.html