jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码

要实现圆角无刷新表单带输入验证功能，需要使用jQuery、HTML5和CSS3来完成。下面就是实现步骤：

1. 定义页面结构

<form id="myForm" action="" method="post">
    <div class="form-group">
        <input type="text" name="username" id="username" placeholder="请输入用户名">
    </div>
    <div class="form-group">
        <input type="password" name="password" id="password" placeholder="请输入密码">
    </div>
    <div class="form-group">
        <input type="password" name="password2" id="password2" placeholder="请再次输入密码">
    </div>
    <div class="form-group">
        <button type="submit" id="submitBtn">提交</button>
    </div>
</form>

在这段代码中，我们定义了一个form表单，包含三个输入框和一个提交按钮。

2. 设计样式

.form-group {
    margin-bottom: 20px;
}

input[type="text"], input[type="password"] {
    width: 100%;
    padding: 10px;
    border-radius: 3px;
    border: 1px solid #ccc;
    box-shadow: none;
    outline: none;
}

input[type="text"]:focus, input[type="password"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

button[type="submit"] {
    display: block;
    width: 100%;
    padding: 10px;
    border-radius: 3px;
    border: none;
    box-shadow: none;
    outline: none;
    background-color: #007bff;
    color: #fff;
}

button[type="submit"]:hover {
    background-color: #0069d9;
}

在这段代码中，我们定义了输入框、提交按钮的样式，其中使用了圆角、边框和阴影等CSS3属性。

3. 编写JavaScript代码

$(function() {
    // 设置默认提交按钮状态为不可用
    $("#submitBtn").attr("disabled", "disabled");

    // 验证表单信息
    $("input").keyup(function() {
        var username = $("#username").val();
        var password = $("#password").val();
        var password2 = $("#password2").val();

        // 验证用户名是否为空
        if (username == "") {
            $("#username").next(".error").remove();
            $("#username").after("<span class='error'>用户名不能为空</span>");
        } else {
            $("#username").next(".error").remove();
        }

        // 验证密码是否为空
        if (password == "") {
            $("#password").next(".error").remove();
            $("#password").after("<span class='error'>密码不能为空</span>");
        } else {
            $("#password").next(".error").remove();
        }

        // 验证两次输入的密码是否相同
        if (password != password2) {
            $("#password2").next(".error").remove();
            $("#password2").after("<span class='error'>两次输入的密码不相同</span>");
        } else {
            $("#password2").next(".error").remove();
        }

        // 判断是否可以提交表单
        if (username != "" && password != "" && password2 != "" && password == password2) {
            $("#submitBtn").removeAttr("disabled");
        } else {
            $("#submitBtn").attr("disabled", "disabled");
        }
    });
});

在这段代码中，我们使用jQuery来完成输入框内容的验证，并设置提交按钮的状态。

示例说明

以下是两个示例，演示如何使用上述代码实现圆角无刷新表单带输入验证功能。

示例一：实现圆角无刷新表单带输入验证功能

此示例演示了如何使用上述代码，实现圆角无刷新表单带输入验证功能。

示例二：实现圆角无刷新表单带输入验证功能并使用Bootstrap样式

此示例演示了如何使用上述代码，实现圆角无刷新表单带输入验证功能，并使用Bootstrap样式对表单进行美化。