表单之textfileld控件登陆_ext textfileld-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42666837/article/details/83618917

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录界面</title>
    <script typt="text/javascript" src="../ext/ext-all.js"></script>
    <link rel="stylesheet" href="../ext/resources/css/ext-all.css"/>
</head>
<body>
<div id="login"></div>
<script typt="text/jjavascript">
    Ext.onReady(function(){

       var login=new Ext.form.FormPanel({
           title:'用户登录',
           id :'userLogin',
           renderTo:'login',
           width:500,
           height:270,
           items:[{
               xtype:'textfield',
               fieldLabel:'用户名',
               allowBlank:false,/*设置不能为空*/
               blankText:'用户名不能为空',
               emptyText:'请输入用户名',
               name:'userName',
               msgTarget:'under',/*错误提示*/
               regex:/^\d{3,10}$/ ,/*正则表达式,固定的数字，必须3到10位*/
               regexText:'用户名长度必须是3-10位的数字',/*正则表达式之后提示*/
               id:'userName'
           },{
               xtype:'textfield',
               fieldLabel:'密码',
               inputType:'password',/*密码黑色显示*/
               name:'userPass',
               id:'userPass'
           }],
           buttons:[{
               text:'登陆'
           },
               {
                   text:'关闭'
               }]
       });

    });
</script>
</body>
</html>