jq操作与验证带fck的表单
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/User.Master" Inherits="System.Web.Mvc.ViewPage<AqiooViewModelItem<Aqioo.Modules.Consult.ViewModels.PubArticleModel>>" %>
<%@ Import Namespace="Aqioo.Modules.User.Models" %>
<%@ Import Namespace="Aqioo.Extensions" %>
<asp:Content ID="HeadCssFiles" ContentPlaceHolderID="HeadCssFiles" runat="server">
<style type="text/css">
label.error2
{
color: Red;
background: url(/Styles/user/images/error.jpg) no-repeat 0 0;
padding-left: 20px;
line-height: 22px;
position: absolute;
left: 5px;
bottom: 5px;
width: 170px;
}
label.valid2
{
background: url(/Styles/user/images/success.jpg) no-repeat 0 0;
color: #008000;
}
.errorContent
{
float: left;
position: relative;
}
</style>
</asp:Content>
<asp:Content ID="Title" ContentPlaceHolderID="Title" runat="server">
<%=Html.PageTitle(Model.Localize("阿启网"), Model.Localize("我是大师"), Model.Localize("发布文章"))%>
</asp:Content>
<asp:Content ID="HeadScripts" ContentPlaceHolderID="HeadScripts" runat="server">
<%Html.RenderScriptTag("jquery.validate.min.js");
Html.RenderScriptTag("jquery.FCKEditor.js");%>
<script src="/Content/fckeditor.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ContentPlaceHolderID="HeroBanner" ID="HeroBanner" runat="server">
<%Html.RenderPartialFromSkin("UserBanner", new AqiooViewModelPartial<int>(Model, 2)); %>
</asp:Content>
<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="contentbox">
<%Html.RenderPartialFromSkin("UserMenu", new AqiooViewModelPartial<int>(Model, 2)); %>
<div class="center_center" style="width: 783px;">
<div class="center_A" style="width: 750px;">
<font>发布文章</font></div>
<div class="blank10">
</div>
<div class="center_B" style="width: 781px;">
<div style="color: Red; font-weight: bold; text-align: center; padding-top: 10px">
<%=Html.ValidationSummary() %></div>
<% var model = Model.Item; %>
<form id="articleForm" class="input_box" action="/Consult/PubArticle.aspx" method="post">
<div class="fontgray title_msg">
本页面带(<label class="fontred">*</label>)必须填写</div>
<ul class="input_box1" style="width: 765px;">
<li>
<div class="left">
文章标题：</div>
<div class="right">
<input type="text" name="d_topic" id="txtd_topic" style="width: 450px; margin-top: 8px;" />
</div>
<div class="errorContent" style="height: 35px;">
</div>
</li>
<li>
<div class="left">
文章类型：</div>
<div class="right">
<span style="float: left;">
<input type="radio" name="d_sort" value="0" />空
<input type="radio" name="d_sort" value="原创" />原创
<input type="radio" name="d_sort" value="转贴" />转贴
<input type="radio" name="d_sort" value="翻译" />翻译
<input type="radio" name="d_sort" value="随笔" />随笔 </span>
</div>
<div class="errorContent" style="height: 35px;">
</div>
</li>
<li>
<div class="left">
文章分类：</div>
<div class="right">
<select name="cid" id="cid" style="float: left; margin-top: 8px;">
<option value='' selected="selected">请选择分类</option>
<% foreach (var ele in model.UserClass)
{%>
<option value='<%=ele.cid %>'>
<%= ele.c_name %></option>
<%} %>
</select>
</div>
<div class="errorContent" style="height: 35px;">
</div>
</li>
<li>
<div class="left" style="height: 95px;">
摘要：</div>
<div class="right" style="height: 95px;">
<textarea name="d_summary" id="d_summary" cols="72" rows="3" style="width: 450px; height:65px;
margin-top: 8px;"></textarea>
</div>
<div class="errorContent" style="height: 85px;">
</div>
</li>
<li>
<div class="left" style="height: 355px;">
正文：</div>
<div class="right" style="width: 628px; height:300px;">
<textarea name="d_remark" id="d_remark" cols="0" rows="0" style="display: none;"></textarea>
</div>
<div class="errorContent" style="height: 30px; width: 630px">
<font color="red" id="fontCount" style="float: right;">已输入0字符</font>
</div>
</li>
<li style="line-height: 30px;">
<div class="left" style="height: 60px;">
关键字：</div>
<div class="right">
<input type="text" name="sp_keyes" id="sp_keyes" style="width: 603px;" />
<span style="display: block;">最多30个字符，5个词组，请用逗号隔开，添加关键字，让更多人浏你的文章</span>
</div>
</li>
</ul>
<div class="buttons">
<input type="submit" value=" 提交 " />
<%=Html.AqiooAntiForgeryToken() %>
</div>
<%if (model.BlogData != null)
{ %>
<script type="text/javascript">
$("[name='d_sort'][value='<%=model.BlogData.d_sort %>']").attr("checked", true);
$("#d_summary").val('<%=model.BlogData.d_summary %>');
$("#txtd_topic").val('<%=model.BlogData.d_topic %>');
$("#d_remark").val('<%=model.BlogData.d_remark %>');
$("#sp_keyes").val('<%=model.BlogData.sp_keyes %>');
$("#cid>option[value='<%=model.BlogData.cid %>']").attr("selected", true);
</script>
<%} %>
<script type="text/javascript">
var fck = $('#d_remark').fck({ path: '/Content/', toolbar: 'Custom', width: '620px', height: '300px' });
function FCKeditor_OnComplete() {
var oEditor = FCKeditorAPI.GetInstance('d_remark');
var doc = oEditor.EditorDocument;
if (doc.body.innerText) {
remark = $.trim(doc.body.innerText).length;
}
else {
remark = $.trim(doc.body.textContent).length;
}
$("#fontCount").html("已经输入 " + remark + " 字符");
addEvent(doc, "keyup", function() { editor_blur(doc); });
}
function addEvent(ele, e, call) {
if (window.addEventListener)
ele.addEventListener(e, call, false);
else
ele.attachEvent("on" + e, call);
}
function editor_blur(doc) {
var remark = 0;
if (doc.body.innerText) {
remark = $.trim(doc.body.innerText).length;
}
else {
remark = $.trim(doc.body.textContent).length;
}
$("#fontCount").html("已经输入 " + remark + " 字符");
$("#articleForm").validate().element("[name=d_remark]");
}
$(function() {
$.validator.addMethod("checkFCK", function(value, element, param) {
var fckName = param[0];
var fckCheckType = param[1];
var fckContent = $.fck.content(fckName, '');
if (fckContent.length < 1) {
return false;
} else {
return true;
}
}, '文章内容必须填写.');
$("#articleForm").validate({
rules: {
d_topic: { required: true, maxlength: 250 },
d_summary: { required: true, maxlength: 250 },
d_sort: { required: true },
cid: { required: true },
d_remark: { checkFCK: ["d_remark", "required"] }
},
messages: {
d_topic: { required: "文章标题必须填写", maxlength: "文章标题最长为{0}字符" },
d_summary: { required: "文章摘要必须填写", maxlength: "文章摘要最长为{0}字符" },
d_sort: { required: "必须选择文章类型" },
cid: { required: "必须选择文章分类" }
},
success: function(label) {
label.addClass("valid2").text("通过");
},
errorPlacement: function(error, element) {
if (element.is(":radio")) {
element.removeClass("error");
error.appendTo(element.parent().parent().next("div.errorContent"));
}
/*
else if (element.is(":checkbox")) {
error.css("clear", "");
error.appendTo(element.next());
} */
else if (element.attr("id") == "d_remark") {
element.removeClass("error");
//error.appendTo(element.parent().parent().next("div.errorContent"));
error.appendTo(element.parent().next("div.errorContent"));
}
/* else if (element.is(":select")) {
// error.css("clear", "right");
// error.css("marginTop", "8px");
error.appendTo(element.parent());
}
else
error.appendTo(element.parent());
*/
else {
error.appendTo(element.parent().next("div.errorContent"));
}
},
errorClass: "error2"
});
$("#cid").change(function() {
$("#articleForm").validate().element("#cid");
});
$("[name='d_sort']").click(function() {
$("#articleForm").validate().element("[name='d_sort']");
});
});
</script>
</form>
</div>
</div>
<div class="center_right" style="display: none;">
</div>
</div>
<div class="blank10">
</div>
唯有自己看吧，运行不了的，可以看js
posted on 2010-06-23 17:23 jianshaohui 阅读(438) 评论(0) 编辑 收藏 举报
