1.Semantic UI中的驗證控件，功能挺不錯的，中文官網的文檔寫的都比較詳細了，我再這里就不再進行重復了，主要是想說一下它的事件的使用方法，這個可能有部分朋友剛開始接觸的時候不太了解
注意看這幾個事件：前兩個是對於字段驗證通過和失敗之后的事件的調用，后兩個是對整個form是否都驗證通過或者失敗時調用的事件，於是我們在調用的時候可以這么寫
function login()
{
$(".ui.form").form(
{
username: {
identifier: 'userName',
rules: [
{
type: 'empty',
prompt: '用戶名不能為空'
}]
},
userpass: {
identifier: 'userPass',
rules: [
{
type: 'empty',
prompt: '用戶密碼不能為空'
}]
}
}, {
onSuccess: function () {
alert("成功了啊");
}
}
);
}
</script>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.8.2.js"></script> <link href="js-ui/packaged/css/semantic.css" rel="stylesheet" /> <script src="js-ui/packaged/javascript/semantic.js"></script> <script> //登錄驗證 function login() { $(".ui.form").form( { username: { identifier: 'userName', rules: [ { type: 'empty', prompt: '用戶名不能為空' }] }, userpass: { identifier: 'userPass', rules: [ { type: 'empty', prompt: '用戶密碼不能為空' }] } }, { onSuccess: function () { alert("成功了啊"); } } ); } </script> </head> <body> <form id="form1" runat="server"> <div class="ui form segment"> <div class="ui one column relaxed grid"> <div class="column"> <div class="ui fluid form segment"> <h3 class="ui header">測試系統登錄界面</h3> <div class="field"> <label>用戶名</label> <input type="text" name="userName" id="userName" placeholder="用戶名"/> </div> <div class="field"> <label>密碼</label> <input type="password" name="userPass" id="userPass"/> </div> <div class="ui blue submit button" onclick="login()">登錄</div> </div> </div> </div> <div class="ui error message"> </div> </div> </form> </body> </html>
對於字段的是在字段的位置寫，對於這個事件的調用我也是研究了好久，希望大家遇到這個問題的時候可以看一下。