vue3+varlet实现带验证的登录表单效果代码-html代码-BFW代码库

vue3+varlet实现带验证的登录表单效果代码

代码语言：html

代码描述：vue3+varlet实现带验证的登录表单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
<style>
body{
    background: url(//repo.bfw.wiki/bfwrepo/image/5e957a2236f31.png) no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100vw;
}
    #app{
        margin: 100px auto;
        width: 320px;
    }
</style>
</head>

<body>
    <div id="app">

    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.2.22.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/varlet.js"></script>
    <script type="template" id="tempform">
        <var-form ref="form" :disabled="disabled" :readonly="readonly">
          
            
          
          <var-cell>   <var-input placeholder="请输入用户名" :rules="[v => !!v || '用户名不能为空']" v-model="formData.username" /> </var-cell>
          
             <var-cell>  <var-input type="password" placeholder="请输入密码" :rules="[v => !!v || '密码不能为空']" v-model="formData.password" /></var-cell>
          <var-cell>.........完整代码请登录后点击上方下载按钮下载查看