asp.net 服务器端的验证控件

本文介绍 ASP.NET 中几种常用的服务器端验证控件,包括 RequiredFieldValidator、RangeValidator 和 RegularExpressionValidator 的具体应用实例。通过示例展示了如何确保用户输入的数据格式正确且符合预期范围。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  对常用的几个服务器端的验证控件进行实验,在登陆页面常会用到。  

<table >
     <tr>
       <td>
         <asp:ValidationSummary ID="ErrorSummary" HeaderText ="用户操作常见错误信息。" runat ="server"   Font-Bold ="true"  ShowMessageBox="false"  ShowSummary ="true"  />
       </td>
     </tr>
      <tr>
        <td>
          用户名称:<asp:TextBox ID="UserName" runat="server" Width ="150"></asp:TextBox>
         <asp:RequiredFieldValidator ID="ru" runat="server" ErrorMessage="用户名称不能为空。Font-Bold =true 为加粗" ControlToValidate="UserName"  Display ="None"  ></asp:RequiredFieldValidator>
         <asp:RangeValidator ID="renge" runat ="server" ControlToValidate ="UserName" ErrorMessage ="必须是小写字母," MaximumValue ="z" MinimumValue ="a" Font-Bold ="true" Display ="None" ></asp:RangeValidator>
         </td></tr>
         <tr>
         <td>
          用户密码:<asp:TextBox ID="Password"  runat ="server" Width ="150"></asp:TextBox>
          <asp:RequiredFieldValidator ID="rp" runat ="server" ErrorMessage ="用户密码不能为空。" ControlToValidate ="Password" Display ="None"  ></asp:RequiredFieldValidator>
         </td></tr>
        
         <tr>
          <td>
          用户年龄:<asp:TextBox ID="UserAge" runat ="server" Width ="150"></asp:TextBox>
          <asp:RangeValidator ID="rangeAge" runat ="server" ControlToValidate ="UserAge" ErrorMessage ="您输入的数值必须再1~150之间的整数。" MaximumValue ="150" MinimumValue ="1" Type ="integer"  Font-Bold ="true" Display ="None" ></asp:RangeValidator>
          </td>
         </tr>
         <tr>
          <td>
          电子邮箱:<asp:TextBox ID="Email"  runat="server" Width ="150"></asp:TextBox>
          <asp:RegularExpressionValidator ID="regularExpreEmail" runat ="server" ErrorMessage ="电子邮箱的格式不正确。" ControlToValidate ="Email" Font-Bold ="true"  ValidationExpression ="/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*" Display ="None" ></asp:RegularExpressionValidator>
          </td>
         </tr>
         <tr>
          <td>
          电话号码:<asp:TextBox ID="Telephone" runat ="server" Width ="150"></asp:TextBox>
          <asp:RegularExpressionValidator ID="regulerExpreTelephone" runat ="server" ErrorMessage ="两种模式:一种是区号为3位,电话号码为8位,另一种是区号为4位,电话号码为7位。" ControlToValidate ="telephone" ValidationExpression ="/d{3}-/d{8}|/d{4}-/d{7}" Font-Bold ="true" Display ="None" ></asp:RegularExpressionValidator>
          </td>
         </tr>
         <tr>
          <td>
          移动电话:<asp:TextBox ID="MobilePhone" runat ="server" Width ="150" ></asp:TextBox>
          <asp:RegularExpressionValidator ID ="regularMobilphone" runat ="server" ErrorMessage ="只能是数字13*|15*,格式不正确" ControlToValidate ="MobilePhone" ValidationExpression ="13/d{9}|15/d{9}" Font-Bold ="true" Display ="None" ></asp:RegularExpressionValidator>        
          </td>
         </tr>
         <tr>
          <td>
          个人主页:<asp:TextBox ID ="httpMyself" runat ="server" Width ="150"></asp:TextBox>
          <asp:RegularExpressionValidator ID ="regularHttp" runat ="server" ErrorMessage ="输入正确的网址http://www.aaa.aaa.aa" ControlToValidate ="httpMyself" ValidationExpression ="http:///S+/./S+" Font-Bold ="true"  Display ="None" ></asp:RegularExpressionValidator>
          </td>
         </tr>
        
           <tr>
         <td align ="left">       
         <asp:Button ID="SureBtn" runat ="server" Text ="确定" Width ="80"/>        
         </td></tr>
    </table> 

### 实现 Vue3 + Vite + Ant Design 日历组件全中文显示 为了确保日历组件能够完全以中文显示,在 `Vue3` 和 `Vite` 的环境中集成 `Ant Design` 需要遵循特定的设置方法。 #### 1. 安装依赖包 确保安装了必要的依赖项,包括 `ant-design-vue` 及其本地化支持文件。这可以通过 npm 或 yarn 来完成: ```bash npm install ant-design-vue dayjs@latest ``` 或者使用 Yarn: ```bash yarn add ant-design-vue dayjs@latest ``` #### 2. 主应用入口配置 (`main.js`) 在项目的主应用程序入口处注册 `Ant Design Vue` 组件库,并加载样式表。此操作使得整个项目可以访问到这些 UI 组件及其默认样式[^2]。 ```javascript import { createApp } from &#39;vue&#39;; import App from &#39;./App.vue&#39;; import Antd from &#39;ant-design-vue&#39;; import &#39;ant-design-vue/dist/antd.css&#39;; const app = createApp(App); app.use(Antd); // 挂载根实例 app.mount(&#39;#app&#39;); ``` #### 3. 使用 `<AConfigProvider>` 进行全局配置 为了让所有的日期时间控件都能识别中文环境,可以在顶层包裹一层 `<a-config-provider>` 并传入相应的语言包对象 `zhCN`[^3]。 ```html <template> <a-config-provider :locale="zhCN"> <!-- 路由视图或其他内容 --> <router-view></router-view> </a-config-provider> </template> <script> import zhCN from &#39;ant-design-vue/es/locale/zh_CN&#39;; export default { data() { return { zhCN, }; }, }; </script> ``` #### 4. 设置单个组件的语言属性 对于具体的日期选择器或日历组件来说,则需单独指定它们所使用的地区信息以及初始化状态值。这里展示了如何通过传递 `:locale` 属性来控制日历界面的文字呈现方式[^1]。 ```html <template> <div class="calendar-container"> <a-calendar v-model:value="value" :locale="locale" @panelChange="onPanelChange"></a-calendar> </div> </template> <script setup> import { ref } from &#39;vue&#39;; import locale from &#39;ant-design-vue/es/date-picker/locale/zh_CN&#39;; import dayjs from &#39;dayjs&#39;; import &#39;dayjs/locale/zh-cn&#39;; // 加载中文语言包 dayjs.locale(&#39;zh-cn&#39;); // 应用中文语言环境 const value = ref(dayjs()); const onPanelChange = (value, mode) => { console.log(value.format(), mode); }; </script> ``` 以上步骤完成后,应该能够在基于 `Vue3`, `Vite` 构建的应用程序里看到带有完整中文标签的日历插件正常工作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值