jquery 表单验证demo

最新推荐文章于 2022-05-10 13:19:49 发布

转载最新推荐文章于 2022-05-10 13:19:49 发布 · 784 阅读

文章标签：

#表单验证 #jquery插件

jquery plugin 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何使用HTML、CSS、JavaScript等技术构建一个简单的前端登录页面，并实现了用户名和密码的验证功能。

前台

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body
        {
            margin: 0;
            padding: 0;
            background: url("/site_media/www_img/body_bg.png") repeat 0 0 #F2F2F2;
            width: 100%;
            height: 166px;
            color: #333333;
            font: 12px/18px "tahoma","Microsoft YaHei","arial","SimHei","SimSun";
        }
        /*Tooltips*/
        .tooltips_main
        {
            position: absolute;
            left: 0;
            margin: -5px 0 0 2px;
            z-index: 999;
        }
        .tooltips_box, .tooltips, .msg
        {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            position: relative;
            border-style: solid;
            border-color: #FF1F1F;
        }
        .tooltips, .msg
        {
            border-width: 0 1px;
            *left: -2px;
            background-color: #FFCFCF;
        }
        .tooltips_box
        {
            border-width: 1px;
            line-height: 1.5;
        }
        .tooltips
        {
            margin: 0 -2px;
        }
        .msg
        {
            margin: 1px -2px;
            padding: 0 6px;
            color: #2F2C2C;
            text-shadow: 0 1px 0 #FFFFFF;
            font-size: 12px;
        }
        .ov
        {
            background: url('http://img.webluker.com/img_new/tri.gif') no-repeat scroll 0 0 transparent;
            position: absolute;
            left: 30%;
            overflow: hidden;
            width: 15px;
            height: 15px;
            margin: 16px 0 0 0;
            display: inline;
        }
        /*end Tooltips*/
    </style>
    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
    <script src="~/Scripts/webluker_1.0.8.js"></script>
</head>
<body>
    <form id="form" onsubmit="return login();">
        <div style="margin-left: 50px; margin-top: 50px;">
            <table>
                <tr>
                    <td>用户名</td>
                    <td>
                        <div class="field-group">
                            <span class="control-group" id="username_input">
                                <div>
                                    <input type="text" id="username" name="username" maxlength="20" value="" onblur="checkUserName(this.value);" />
                                </div>
                            </span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td>
                        <div class="field-group">
                            <span class="control-group" id="password_input">
                                <div>
                                    <input type="password" id="password" name="password" maxlength="20" value="" onblur="checkPwd(this.value);" />
                                </div>
                            </span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input id="submit" type="submit" value="登录">
                    </td>
                </tr>
            </table>
        </div>
    </form>
    <script type="text/javascript">
        function checkUserName(username) {
            if (username == '') {
                showTooltips('username_input', '请输入用户名');
            } else {
                hideTooltips('username_input');
            }
        }
        function checkPwd(pwd) {
            if (pwd == '') {
                showTooltips('password_input', '请输入密码');
            } else {
                hideTooltips('password_input');
            }
        }
        function login() {
            hideAllTooltips();
            if (validate()) {
                $.ajax({
                    type: 'get',
                    url: '/Home/Login',
                    data: { username: 'chad', password: '123456' },
                    success: function (data) {
                        alert(data);
                    },
                    error: function (msg) { },
                    beforeSend: function () { },
                    complete: function () { }
                });
            } else {
                return false;
            }
        }
        function validate() {
            var ckh_result = true;
            if ($('#username').val() == '') {
                showTooltips('username_input', '请输入用户名');
                ckh_result = false;
            }
            if ($('#password').val() == '') {
                showTooltips('password_input', '请输入密码');
                ckh_result = false;
            }
            return ckh_result;
        }
    </script>
</body>
</html>

后台

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcApplication18.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        [HttpGet]
        public bool Login(string username, string password)
        {
            if (username.Equals("chad") && password.Equals("123456"))
            {
                return true;
            }
            else {
                return false;
            }
        }
    }
}