前端实现输入框前带红色星号必填提示方法

y乐悠

已于 2023-03-31 12:31:22 修改

阅读量3.2k

点赞数

分类专栏：前端文章标签：前端 html javascript

于 2023-03-30 12:16:03 首次发布

本文链接：https://blog.csdn.net/m0_45077860/article/details/129854960

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1，定位的方式定上去

	<view class="zhuce_cont" :style="'top:'+ (navHeight)+'px'">

			<u-form :model="form" ref="uForm" class="form">

				<u-form-item labelWidth="200rpx" label="用户名:" prop="user" borderBottom>
					<view class="icon">
						*
					</view>
					<u-input v-model="form.user" class="form-item" border="none" placeholder="请填写输入姓名" />
				</u-form-item>

				

				<u-form-item labelWidth="200rpx" label="手机号:" prop="tel" borderBottom>
					<view class="icon">
						*
					</view>
					<u-input placeholder="请填写手机号" v-model="form.tel" border="none" class="form-item" />
				</u-form-item>
			</u-form>

		</view>

.zhuce_cont {
			position: relative;
			padding: 25rpx;

			.icon {
				position: absolute;
				color: red;
				top: 34rpx;
				left: -15rpx;
			}
}

2，element-ui el-input输入框加上红色星号必填验证(vue项目)

<el-form-item label="公司名称：" prop="name">
	<el-input
	  v-model="form.name"
	  minlength="1"
	/>
</el-form-item>

data() {
    return {
      rules: {
        name:[{required: true, message: '请输入公司名称', trigger: 'blur'}]
      }
    };
  },

3，css样式设置（微信小程序使用了此方法但是部分用户反映布局错乱，不清楚是什么原因）

<style>
    label.xrequired:before {
        content: '* ';
        color: red;
    }
</style>
<label class="xrequired"> </label>
<input type="text" value=""/>